/* Styles for Chart.js visualizations */
body {
  /* hotfix for table overflowing,
  even with correct scrollbar */
  overflow-x: hidden;
}

.chart-visualization {
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
}

/* Chart container to ensure proper sizing */
.chart-container {
  width: 100%;
  position: relative;
  height: clamp(200px, 40vh, 300px); /* Responsive height that scales with viewport */
}

/* Control panel styles */
.chart-controls {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.slider-control {
  display: flex;
  align-items: center;
  width: 100%;
}

.chart-controls label {
  font-weight: bold;
  min-width: 20px;
  text-align: right;
}

.chart-controls input[type="range"] {
  flex: 1;
  margin: 0 10px;
}

.chart-controls span {
  width: 40px;
  text-align: right;
  font-family: monospace;
}

.parameter-canvas {
  cursor: grab;
}

.parameter-canvas:active {
  cursor: grabbing;  /* Show grabbing cursor while dragging */
}

.parameter-canvas-full {
  width: 100%;
  height: 100%;
  cursor: grab;
}

.parameter-canvas-full:active {
  cursor: grabbing;
}

/* Cursor styles for interactive elements */
.weight-canvas {
  cursor: default;
  }

.weight-canvas.draggable {
  cursor: grab;
}

.weight-canvas.dragging {
  cursor: grabbing;
}

/* Dark theme support */
[data-md-color-scheme="slate"] .chart-visualization {
  background-color: #2e303e;
  border-color: #1a1b26;
}

[data-md-color-scheme="slate"] .chart-controls {
  background-color: #222330;
}

[data-md-color-scheme="slate"] .mma-parameters {
  background-color: #222330;
}

[data-md-color-scheme="slate"] .chart-controls label,
[data-md-color-scheme="slate"] .chart-controls span {
  color: #e0e0e0;
}

/* Parameter grid responsive layout */
.parameter-grid {
  display: grid;
  grid-template-columns: 1fr 250px;
  gap: 20px;
  align-items: start;
}

/* MMA parameters styling - ensure background color */
.mma-parameters {
  margin-bottom: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

/* Large screen adjustments */
@media (min-width: 769px) {
  .chart-controls {
    min-width: 300px;
  }
}

@media (max-width: 768px) {
  .parameter-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .parameter-grid > div:last-child {
    max-height: 250px;
  }
}

/* Real-world example styles */
.real-world-controls {
  margin-bottom: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.real-world-controls .dataset-selection {
  margin-bottom: 15px;
}

.real-world-controls .dataset-label {
  font-weight: bold;
  margin-right: 10px;
}

.real-world-controls .dataset-select {
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.dataset-info {
  font-size: 0.9em;
  color: #333;
  cursor: pointer;
  transition: background-color 0.2s;
}

.dataset-info:hover {
  background-color: #f0f0f0;
}

.dataset-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}

.dataset-summary small {
  color: #666;
}

.dataset-details {
  display: none;
  margin-top: 10px;
  padding: 12px;
  background: #fff;
  border-radius: 4px;
  border-left: 4px solid #007bff;
}

.dataset-details.expanded {
  display: block;
}

.dataset-detail-item {
  margin-bottom: 8px;
}

.dataset-detail-footer {
  font-size: 0.85em;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #eee;
}

.dataset-detail-footer a {
  color: #007bff;
  text-decoration: none;
}

.chart-wrapper {
  position: relative;
  width: 100%;
  height: 300px;
  margin-bottom: 20px;
}

.parameter-canvas-full {
  width: 100%;
  height: 100%;
}

/* Dark theme support for new elements */
[data-md-color-scheme="slate"] .real-world-controls {
  background-color: #222330;
}

[data-md-color-scheme="slate"] .dataset-info {
  color: #e0e0e0;
}

[data-md-color-scheme="slate"] .dataset-info:hover {
  background-color: #3a3c4e;
}

[data-md-color-scheme="slate"] .dataset-details {
  background: #2e303e;
  border-left-color: #6c7ce7;
}

[data-md-color-scheme="slate"] .dataset-summary small {
  color: #b0b0b0;
}

[data-md-color-scheme="slate"] .dataset-detail-footer {
  border-top-color: #444;
}

[data-md-color-scheme="slate"] .dataset-detail-footer a {
  color: #6c7ce7;
}

[data-md-color-scheme="slate"] .real-world-controls .dataset-select {
  background-color: #2e303e;
  border-color: #444;
  color: #e0e0e0;
}