style.css

/* style.css */
/* Layout: Map on left, Controls sidebar on right, Legend top-left overlay */

/* Basic reset and full-screen setup */
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* Prevent scrollbars on the body */
  font-family: sans-serif; /* Basic font setting */
}

/* New App Container using Flexbox */
#appContainer {
  display: flex; /* Enable Flexbox */
  width: 100%;
  height: 100%;
}

/* Map container takes up remaining space */
#cesiumContainer {
  flex-grow: 1; /* Allow map to grow and fill available space */
  height: 100%; /* Fill vertical space */
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative; /* Set as positioning context for absolutely positioned children if needed */
}

/* UI Controls act as the fixed-width sidebar */
#uiControls {
  /* Removed absolute positioning properties */
  width: 300px; /* Fixed width for the sidebar */
  flex-shrink: 0; /* Prevent sidebar from shrinking */
  height: 100%; /* Fill vertical space */
  overflow-y: auto; /* Add scrollbar if content overflows vertically */
  padding: 15px;
  background-color: rgba(40, 40, 40, 0.9); /* Darker semi-transparent background */
  color: #ffffff; /* White text */
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2); /* Shadow on the left edge */
  z-index: 5; /* Above map, below legend overlay */
  font-size: 14px;
  box-sizing: border-box; /* Include padding in width calculation */
}

/* Heading style within sidebar */
#uiControls #controlsTitle {
  margin-top: 0;
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 1px solid #555;
  font-size: 16px;
  text-align: center;
}

#uiControls #sequenceTitle {
  margin-top: 20px; /* Extra space above the Sequence Design title */
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 1px solid #555;
  font-size: 16px;
  text-align: center;
}

/* Styles for controls inside the sidebar */
#uiControls label {
  display: inline-block;
  width: 65px; /* Align labels */
  margin-bottom: 10px;
  vertical-align: middle;
}

#uiControls input[type="range"] {
  width: calc(100% - 130px); /* Adjust width considering label and value span */
  vertical-align: middle;
  margin-bottom: 10px;
  cursor: pointer;
}

#uiControls span {
  display: inline-block;
  width: 40px; /* Space for value display */
  text-align: right;
  margin-left: 5px;
  vertical-align: middle;
  font-family: monospace; /* Monospaced font for numbers */
  font-weight: bold;
}

#uiControls button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  margin-top: 10px;
  background-color: #4a4a4a;
  color: white;
  border: 1px solid #666;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s ease;
}

#uiControls button:hover {
  background-color: #5a5a5a;
}

#uiControls button:active {
  background-color: #3a3a3a;
}

/* Legend remains absolutely positioned (Top-Left) */
#legendDiv {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 320px; /* Adjust width as needed */
  max-height: 1000px; /* Limit height and make it scrollable */
  overflow-y: auto;
  padding: 15px;
  background-color: rgba(40, 40, 40, 0.8); /* Slightly more transparent than controls */
  color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 10; /* Highest z-index to be on top */
  font-size: 17px;
}

/* Styles for legend content */
#legendDiv h4 {
  margin-top: 0;
  margin-bottom: 30px;
  padding-bottom: 5px;
  border-bottom: 1px solid #555;
  font-size: 20px;
  text-align: center;
}

/* space items away from the header/icon */
#legendDiv > div[id^="legend-item-"] {
  margin-top: 10px;
}

#legendDiv div { /* Style for each legend item row */
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}

#legendDiv div > * { /* Space between symbol and text */
  margin-right: 8px;
}

#legendDiv div > *:last-child {
  margin-right: 0;
}

/* Example style for a legend symbol using a div */
.legend-symbol {
  width: 15px;
  height: 15px;
  display: inline-block;
  border: 1px solid #ccc; /* Optional border for clarity */
  flex-shrink: 0; /* Prevent symbol from shrinking */
}

/* Example style for a legend symbol using an img */
.legend-symbol-img {
    width: 15px;
    height: 15px;
    vertical-align: middle; /* Align image better if needed */
    flex-shrink: 0;
}

.legend-ppt-symbol-img {
  width: 30px;
  height: 30px;
  vertical-align: middle; /* Align image better if needed */
  flex-shrink: 0;
}

/* Style for the text span within power plant legend items */
#legendDiv .power-plant-legend-item span {
  font-size: 24px !important;
  /* font-weight: bold; */
  color: #ffffff;
}

/* Legend title transition */
#legendDiv #legendTitle {
  /* Default opacity */
  opacity: 1;
  /* Define the transition effect */
  /* Transition the 'opacity' property over 0.4 seconds with ease-in-out timing */
  transition: opacity 0.4s ease-in-out;

  /* --- Add any OTHER existing styles for #legendTitle here --- */
  /* For example: */
  margin-top: 0;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #555;
  font-size: 18px;
  text-align: center;
}

#heightValue {
  display: inline-block;
  min-width: 100px; /* Adjust as needed */
  text-align: right;
}

#centerLat {
  display: inline-block;
  min-width: 100px; /* Adjust as needed */
  text-align: right;
}

#centerLon {
  display: inline-block;
  min-width: 100px; /* Adjust as needed */
  text-align: right;
}

/* hide elements */
.collapsed {
  display: none;
}

/* Ensure primary legend items stack vertically */
#primaryLegendItemsContainer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Ensure alternative legend items stack vertically */

#alternativeLegendItemsContainer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#bottomLegendItemsContainer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Override centered items for legend containers */
#legendDiv > #primaryLegendItemsContainer {
  align-items: flex-start;
}

#legendDiv > #alternativeLegendItemsContainer {
  align-items: flex-start;
}

#legendDiv > #bottomLegendItemsContainer {
  align-items: flex-start;
}

#bottomLegendItemsContainer > div,
#primaryLegendItemsContainer > div,
#alternativeLegendItemsContainer > div {
  margin-bottom: 10px;
}

/* Hide bottom legend title and items wrapper when empty */
#legendTitle:empty,
#legendTitleContainer:empty,
#alternativeLegendTitle:empty,
#alternativeLegendTitleContainer:empty,
#bottomLegendTitle:empty,
#bottomLegendTitleContainer:empty {
  display: none;
}

/* If there’s no title, hide the title <h4> and its container */
#legendTitle:empty,
#legendTitleContainer:empty {
  display: none;
}

/* Style for separate “note” legend entries */
.legend-note span {
  font-size: 18px !important;
  margin-left: 34px;  /* indent under the main label */
  color: #ffffff;
}

/* Make the hidden placeholder occupy the same height/gap as a real entry */
.legend-placeholder {
  margin-bottom: 10px;
}

/* Collapse the alternative legend block when it’s empty */
#alternativeLegendTitle:empty,
#alternativeLegendTitleContainer:empty,
#alternativeLegendItemsContainer:empty {
  display: none !important;
  margin-top: 0 !important;
}

/* Collapse the bottom legend block when it’s empty */
#bottomLegendTitle:empty,
#bottomLegendTitleContainer:empty,
#bottomLegendItemsContainer:empty {
  display: none !important;
  margin-top: 0 !important;
}

/* Collapse the bottom legend block when it’s empty */
#legendTitle:empty,
#legendTitleContainer:empty,
#legendItemsContainer:empty {
  display: none !important;
  margin-top: 0 !important;
}

/* Hide and reset spacing when there’s no alternative legend content */
#alternativeLegendTitleContainer:has(> #alternativeLegendTitle:empty),
#alternativeLegendItemsContainer:empty {
  display: none !important;    /* completely remove from layout */
  margin-top: 0 !important;    /* override the inline 20px */
}

/* Hide and reset spacing when there’s no bottom legend content */
#bottomLegendTitleContainer:has(> #bottomLegendTitle:empty),
#bottomLegendItemsContainer:empty {
  display: none !important;
  margin-top: 0 !important;
}

#nlcColorbar { pointer-events: none; }