/* uPlot Professional Theme CSS */

/* Container styles */
.uplot-container {
  position: relative;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: transparent;
  width: 100%;
  height: 100%;
  /* Removed fixed min-height to allow flexible grid sizing */
}

.uplot-container > div:first-child {
  width: 100% !important;
  height: 100% !important;
  min-height: 150px; /* Set reasonable minimum for charts */
}

/* Ensure uPlot canvas takes full size */
.uplot-container .uplot,
.uplot-container .u-wrap {
  width: 100% !important;
  height: 100% !important;
  min-height: inherit;
}

/* Force series colors to be visible */
.uplot canvas {
  background: transparent !important;
}

/* Let uPlot handle stroke colors naturally */

/* Legend container */
.uplot-legend-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Legend styles */
.u-legend {
  font-size: 12px;
  padding: 0;
  background: transparent;
  color: var(--legend-text);
  border: none;
  margin: 0;
  width: 100%;
}

/* Legend table styles */
.u-legend table {
  width: 100%;
  table-layout: auto;
  white-space: nowrap;
  margin: 0 auto;
}

.u-legend tbody {
  display: table-row-group;
}

.u-legend tr {
  display: table-row;
}

.u-legend td, .u-legend th {
  padding: 4px 12px;
  white-space: nowrap;
  text-align: left;
}

.u-legend .u-series {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 2px;
  transition: background 0.2s;
  cursor: pointer;
}

.u-legend .u-series:hover {
  background: rgba(255, 255, 255, 0.1);
}

.u-legend .u-marker {
  width: 16px;
  height: 3px;
  display: inline-block;
  margin-right: 6px;
  border-radius: 1px;
}

/* Cursor styles */
.u-cursor-x, .u-cursor-y {
  opacity: 0.3;
}

.u-cursor-pt {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* Select area styles */
.u-select {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.4);
}

/* Axis styles */
.u-axis {
  font-size: 11px;
}

/* Dark theme variables */
:root[data-theme="dark"], .dark {
  --legend-bg: rgba(30, 30, 30, 0.95);
  --legend-text: rgba(255, 255, 255, 0.9);
  --legend-border: rgba(255, 255, 255, 0.2);
  --grid-color: rgba(255, 255, 255, 0.15);
  --axis-color: rgba(255, 255, 255, 0.25);
  --text-color: rgba(255, 255, 255, 0.8);
}

/* Light theme variables */
:root[data-theme="light"], .light {
  --legend-bg: rgba(255, 255, 255, 0.98);
  --legend-text: rgba(0, 0, 0, 0.9);
  --legend-border: rgba(0, 0, 0, 0.2);
  --grid-color: rgba(0, 0, 0, 0.2);
  --axis-color: rgba(0, 0, 0, 0.3);
  --text-color: rgba(0, 0, 0, 0.8);
}

/* Chart type specific styles */
.chui-chart,
.chui-bar-chart,
.chui-scatter-plot,
.time-series-chart,
.bar-chart,
.scatter-plot {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Allow shrinking in flex containers */
}

.chui-chart .u-wrap,
.chui-bar-chart .u-wrap,
.chui-scatter-plot .u-wrap {
  position: relative;
}

/* Ensure tooltips are visible */
.uplot-tooltip {
  z-index: 1000;
}

/* Fix uPlot default styles */
.uplot .u-wrap {
  position: relative;
}

.uplot .u-legend {
  position: relative;
  z-index: 10;
}

/* Improve series visibility in legend */
.u-series th {
  font-weight: normal;
  padding: 2px 8px;
}

.u-series td {
  padding: 2px 8px;
}

/* Ensure axes are visible */
.uplot .u-axis {
  color: var(--text-color);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .u-legend {
    font-size: 11px;
    padding: 6px;
    gap: 8px;
  }
  
  .u-axis {
    font-size: 10px;
  }
}
