/*
  visualization_styles.css - Stylesheet for AI Experiment Logger visualizations.

  This file provides CSS rules to style visualizations generated by the
  analysis scripts within the AI Experiment Logger plugin.

  Customize these styles to match your desired aesthetic and ensure
  clarity and readability of your visualizations.

  Remember to link this stylesheet to your HTML files where visualizations
  are displayed.  Example:
  <link rel="stylesheet" href="visualization_styles.css">
*/

/*  General Styles  */
body {
  font-family: sans-serif; /* Placeholder: Choose your preferred font */
  margin: 0;
  padding: 0;
}

.visualization-container {
  /*  Styles for the container holding the entire visualization  */
  width: 100%; /* Adjust as needed */
  margin: 10px auto; /* Center horizontally */
  padding: 15px;
  border: 1px solid #ddd; /* Light gray border */
  background-color: #f9f9f9; /* Light background */
  box-sizing: border-box; /* Include padding and border in element's total width and height */
}

h2 {
  /*  Styles for visualization titles  */
  font-size: 1.5em;
  margin-bottom: 10px;
  color: #333; /* Dark gray title color */
}

/*  Styles for tables  */
table {
  width: 100%;
  border-collapse: collapse; /* Remove spacing between table cells */
  margin-bottom: 20px;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2; /* Light gray background for header cells */
  font-weight: bold;
}

/*  Styles for charts (modify based on your charting library) */
.chart-container {
  /*  Placeholder: Styles for containing chart elements  */
  width: 100%;
  height: 300px; /* Adjust height as needed */
  margin-bottom: 20px;
}

/* Placeholder: Add styles for specific chart elements
   Example (using a hypothetical chart library):
   .chart-bar {
       background-color: steelblue;
       color: white;
   }
*/

/* Styles for labels */
.label {
  font-size: 0.8em;
  color: #777;
  margin-top: 5px;
  display: block; /* Ensure label is on its own line */
}

/* Styles for error messages */
.error-message {
    color: red;
    font-weight: bold;
    margin-top: 10px;
}

/*  Add more styles as needed for different visualization types and elements  */

/* Example: Styles for a specific type of chart */
.experiment-comparison-chart {
  /* Add specific styling for experiment comparison charts here */
  /* Example:  adjust colors, fonts, etc. */
}

/* Example: Styles for a specific element within a chart */
.experiment-comparison-chart .axis-label {
  font-size: 0.9em;
  color: #555;
}