/* ===============================
   🟦 Toggle Button Styling
   =============================== */

/* Style for the toggle button that shows/hides the description */
#descriptionToggleBtn {
  padding: 0.5em 1em;             /* Adds spacing inside the button */
  font-size: 1rem;                /* Sets the font size */
  cursor: pointer;                /* Changes cursor to pointer on hover */
}

/* ===============================
   📝 Description Container Styling
   =============================== */

/* Container that holds the description content */
#descriptionContainer {
  background: #f9f9f9;            /* Light gray background */
  border: 1px solid #ddd;         /* Light gray border */
  padding: 1em;                   /* Adds spacing inside the container */
  border-radius: 4px;             /* Rounds the corners */
  line-height: 1.5;               /* Improves readability */
}

/* Removes top margin from h2 headings within the description container */
#descriptionContainer h2 {
  margin-top: 0;
}

/* Styles for preformatted text blocks within the description container */
#descriptionContainer pre {
  background: #eef;               /* Light blue background */
  padding: 0.5em;                 /* Adds spacing inside the pre block */
  overflow-x: auto;               /* Enables horizontal scrolling if needed */
}

/* ===============================
   🖼️ Image Centering
   =============================== */

/* Container to center images both vertically and horizontally */
.image-container {
  display: flex;                  /* Enables Flexbox layout */
  justify-content: center;        /* Centers content horizontally */
  align-items: center;            /* Centers content vertically */
  height: 100vh;                  /* Sets container height to full viewport */
}

/* Ensures images are responsive within their container */
.image-container img {
  max-width: 100%;                /* Prevents image from exceeding container width */
  height: auto;                   /* Maintains aspect ratio */
}

/* ===============================
   🧱 General Layout and Typography
   =============================== */

/* Base styles for the body */
body {
  font-family: sans-serif;        /* Sets a clean sans-serif font */
  margin: 20px;                   /* Adds spacing around the body content */
}

/* ===============================
   📊 Chart Layout and Controls
   =============================== */

/* Wrapper for chart elements */
.chart-wrapper {
  max-width: 900px;               /* Limits the maximum width */
  margin: 30px auto;              /* Centers the wrapper with vertical spacing */
}

/* Container for control buttons */
.controls {
  text-align: right;              /* Aligns buttons to the right */
  margin-bottom: 10px;            /* Adds spacing below the controls */
}

/* Styles for control buttons */
.controls button {
  margin-left: 5px;               /* Adds spacing between buttons */
  padding: 6px 12px;              /* Adds spacing inside the buttons */
  border: none;                   /* Removes default border */
  border-radius: 4px;             /* Rounds the corners */
  background: #007bff;            /* Sets a blue background */
  color: white;                   /* Sets text color to white */
  cursor: pointer;                /* Changes cursor to pointer on hover */
}

/* Hover effect for control buttons */
.controls button:hover {
  opacity: 0.9;                   /* Slightly reduces opacity on hover */
}

/* Styles for canvas elements (charts) */
canvas {
  background: #fafafa;            /* Light background for contrast */
  border: 1px solid #ddd;         /* Light gray border */
}

/* ===============================
   📋 Table Styling
   =============================== */

/* Styles for tables */
table {
  border-collapse: collapse;      /* Merges table borders */
  width: 100%;                    /* Sets table to full width */
  margin-top: 20px;               /* Adds spacing above the table */
}

/* Styles for table headers and cells */
th, td {
  border: 1px solid #000;         /* Black border for clarity */
  padding: 8px;                   /* Adds spacing inside cells */
  text-align: left;               /* Aligns text to the left */
}

/* Background color for table headers */
th {
  background-color: #f2f2f2;      /* Light gray background */
}

/* ===============================
   🧩 Additional UI Elements
   =============================== */

/* Styles for a custom toggle button */
#toggleBtn {
  padding: 10px 20px;             /* Adds spacing inside the button */
  font-size: 16px;                /* Sets the font size */
  cursor: pointer;                /* Changes cursor to pointer on hover */
}

/* Styles for the iframe container */
#iframeContainer {
  margin-top: 1em;                /* Adds spacing above the container */
}