/*
  visualization_styles.css - CSS file for styling visualizations of feature importance and model predictions.

  This file provides the styling for visualizations generated by the model-explainability-tool plugin.
  It includes styles for feature importance charts, prediction breakdowns, and other interpretability
  visualizations.

  Feel free to customize these styles to match your application's design.

  Table of Contents:
  1. General Styles
  2. Feature Importance Chart Styles
  3. Prediction Breakdown Styles
  4. [Add more sections as needed]
*/

/* 1. General Styles */

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

.visualization-container {
  margin: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.visualization-title {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 10px;
}

.visualization-description {
  font-size: 1em;
  color: #555;
  margin-bottom: 20px;
}

/* 2. Feature Importance Chart Styles */

.feature-importance-chart {
  /* Styles for the chart container */
  width: 100%;
  height: 400px; /* Adjust as needed */
}

.feature-importance-bar {
  /* Styles for individual bars in the chart */
  background-color: #4CAF50; /* Green */
  color: white;
  padding: 5px;
  margin-bottom: 2px;
  text-align: right;
}

.feature-name {
  /* Styles for feature names displayed in the chart */
  float: left;
}

.feature-importance-value {
  /* Styles for feature importance values */
  float: right;
}

/* 3. Prediction Breakdown Styles */

.prediction-breakdown {
  /* Styles for the overall prediction breakdown container */
}

.prediction-breakdown-item {
  /* Styles for individual items in the breakdown */
  margin-bottom: 5px;
}

.prediction-breakdown-label {
  /* Styles for labels in the breakdown */
  font-weight: bold;
}

.prediction-breakdown-value {
  /* Styles for values in the breakdown */
  color: #007bff; /* Blue */
}

/* 4.  [Add more sections as needed. Example: Styles for specific model types] */
/* Example: Styles for tree-based models */

.tree-node {
    /* Styles for nodes in a decision tree visualization */
    border: 1px solid #ddd;
    padding: 5px;
    margin: 2px;
    border-radius: 3px;
}

/* Placeholders for future customization */

/* Example: Add styles for different color palettes */
/* .color-palette-1 { ... } */

/* Add responsive styles for different screen sizes */
@media (max-width: 768px) {
  .visualization-container {
    margin: 10px;
    padding: 10px;
  }

  .feature-importance-chart {
    height: 300px; /* Adjust height for smaller screens */
  }
}