/* =============================================================================
   GLOBAL BODY STYLES
   ============================================================================= */
body {
  font-family: Arial, sans-serif;  /* Set the default font to Arial with sans-serif fallback */
  margin: 40px;  /* Add 40px margin on all sides of the page */
  background: #f7f7f7;  /* Light gray background for light mode */
  color: #333;  /* Dark gray text color for light mode */
}

/* =============================================================================
   LOGO BAR - TOP HEADER SECTION WITH LOGOS
   ============================================================================= */
.logo-bar {
  display: flex;  /* Use flexbox for horizontal layout */
  justify-content: space-between;  /* Distribute content with space between left and right sides */
  align-items: center;  /* Vertically center all items */
  margin-bottom: 10px;  /* Add space below the logo bar */
}

/* Left side of logo bar containing multiple logos */
.logo-bar-left {
  display: flex;  /* Use flexbox for horizontal layout */
  align-items: center;  /* Vertically center logos */
  gap: 20px;  /* Add 20px space between each logo */
}

/* UOS logo sizing - appears in both light and dark variants */
#uos-logo-light, #uos-logo-dark {
  width: 152px;  /* Set logo width to 152px */
}

/* SML logo sizing - appears in both light and dark variants */
#sml-logo-light, #sml-logo-dark {
  width: 200px;  /* Set logo width to 200px */
}

/* EHL logo sizing - appears in both light and dark variants */
#ehl-logo-light, #ehl-logo-dark {
  width: 115px;  /* Set logo width to 115px */
}

/* Hide all dark mode logos by default (they're shown in dark mode media query) */
#uos-logo-dark, #sml-logo-dark, #ehl-logo-dark {
  display: none;  /* Hide dark logos initially */
}

/* =============================================================================
   HEADING STYLES
   ============================================================================= */
/* Main page heading/title */
h1 {
  text-align: center;  /* Center the heading text */
  margin-bottom: 20px;  /* Add space below heading */
  margin-top: 0;  /* Remove default top margin */
  font-size: 40px;  /* Large heading size */
}

/* Section headers used for major content divisions */
.section-header {
  text-align: center;  /* Center the section header text */
  font-size: 30px;  /* Large font size for sections */
  padding-top: 25px;  /* Add space above the header */
  border-top: 3px solid #ccc;  /* Add a gray line above section */
  margin-bottom: 0px;  /* No space below header */
}

/* =============================================================================
   CANVAS STYLES - FOR CHARTS/GRAPHS
   ============================================================================= */
/* Container that wraps the canvas element */
.canvas-wrapper {
  height: 500px;  /* Set fixed height for canvas area */
  position: relative;  /* Allow absolute positioning of child elements */
}

/* Canvas element styling (used for drawing charts) */
canvas {
  display: block;  /* Make canvas a block element */
  margin: 0 auto;  /* Center the canvas horizontally */
  width: 100% !important;  /* Force canvas to fill container width */
  height: 500px;  /* Fixed height matching wrapper */
  background: none;  /* Transparent background */
  padding: 0;  /* No padding around canvas */
  border-radius: 0;  /* No rounded corners */
  box-shadow: none;  /* No shadow effect */
  z-index: 1;  /* Stack order - above default */
}

/* Hide canvas while it's loading data */
canvas.loading {
  opacity: 0;  /* Make canvas invisible during loading */
}

/* =============================================================================
   CHART CONTAINER STYLES
   ============================================================================= */
/* Individual chart card styling */
.chart-container {
  flex: 1;  /* Allow container to grow and shrink */
  min-width: 500px;  /* Ensure minimum width for readability */
  background: white;  /* White background for chart cards */
  padding: 20px;  /* Internal spacing around chart content */
  border-radius: 10px;  /* Rounded corners for modern look */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);  /* Subtle shadow for depth */
  position: relative;  /* Allow absolute positioning of child elements */
}

/* Canvas inside chart container */
.chart-container canvas {
  flex: 1;  /* Allow canvas to flex within container */
}

/* Row layout for displaying multiple charts side-by-side */
.chart-row {
  display: flex;  /* Use flexbox for horizontal layout */
  justify-content: space-between;  /* Distribute charts evenly */
  gap: 20px;  /* Add space between charts */
  flex-wrap: wrap;  /* Allow charts to wrap to new line on small screens */
}

/* =============================================================================
   TAB AND NAVIGATION STYLES
   ============================================================================= */
/* Row containing sub-tabs */
.sub-tab-row {
  margin-bottom: 5px;  /* Add space below sub-tabs */
  padding-left: 0px;  /* No left padding */
}

/* Master/main tab container */
#masterTabs {
  border-bottom: 3px solid #ccc;  /* Add line below tabs */
  padding-bottom: 10px;  /* Space inside below border */
  margin-bottom: 10px;  /* Space outside below tabs */
  margin-top: 10px;  /* Space above tabs */
  display: inline-flex;  /* Horizontal layout for tabs */
}

#givenergyTabs {
  flex-wrap: wrap;
}

/* Separator line between chart sections */
#chart-seperator {
  border-bottom: 3px solid #ccc;  /* Gray line separator */
  padding-bottom: 10px;  /* Space inside below border */
  margin-bottom: 10px;  /* Space below separator */
}

/* Title/heading for individual charts */
.chart-title {
  text-align: center;  /* Center the chart title */
  margin-bottom: 20px;  /* Space below title */
}

/* Row containing tabs */
.tab-row {
  display: flex;  /* Horizontal layout */
  gap: 10px;  /* Space between tabs */
  margin-bottom: 10px;  /* Space below tab row */
  overflow: visible;  /* Allow content to overflow (for tooltips) */
}

/* Individual tab styling */
.tab {
  padding: 10px 12px;  /* Internal spacing in tab */
  background: #eee;  /* Light gray background */
  border-radius: 6px;  /* Slightly rounded corners */
  cursor: pointer;  /* Show this is clickable */
  user-select: none;  /* Prevent text selection on click */
  font-weight: bold;  /* Bold text */
  transition: 0.2s;  /* Smooth animation for state changes */
  color: #333;  /* Dark text color */
  position: relative;  /* Allow tooltips to position absolutely */
  font-size: 17.5px;  /* Tab text size */
}

/* Larger variant of tab for master tabs */
.master-tab {
  padding: 12px 14px;  /* Slightly more padding */
  font-size: 25px;  /* Larger font size */
}

/* Tab hover effect - lighter background */
.tab:hover {
  background: #ddd;  /* Slightly darker gray on hover */
}

/* Tooltip that appears on tab hover */
.tab::after {
  content: attr(data-tooltip);  /* Display the tooltip text from data attribute */
  position: absolute;  /* Position relative to tab */
  top: calc(100% + 8px);  /* Below the tab with 8px spacing */
  left: 50%;  /* Horizontally center */
  transform: translateX(-50%);  /* Adjust for centering */
  background: #333;  /* Dark background for contrast */
  color: #fff;  /* White text */
  padding: 8px 12px;  /* Internal spacing */
  border-radius: 6px;  /* Rounded corners */
  font-size: 15px;  /* Smaller font than tab */
  font-weight: normal;  /* Regular weight (not bold) */
  white-space: normal;  /* Allow text wrapping */
  width: 220px;  /* Fixed tooltip width */
  text-align: center;  /* Center tooltip text */
  pointer-events: none;  /* Tooltip doesn't interfere with mouse events */
  opacity: 0;  /* Hidden by default */
  transition: opacity 0.2s;  /* Smooth fade in/out */
  z-index: 100;  /* Appear above other elements */
}

/* Show tooltip on tab hover */
.tab:hover::after {
  opacity: 1;  /* Make tooltip visible */
}

/* Special case: first tab's tooltip aligns to the left instead of center */
.tab-row .tab:first-child::after {
  left: 0;  /* Align to left edge */
  right: 0;
  transform: none;  /* No centering transform */
}

/* Active/selected tab styling */
.tab.active {
  background: #3498db;  /* Blue background for active state */
  color: white;  /* White text for contrast */
}

/* =============================================================================
   LEGEND AND CONTROL STYLES
   ============================================================================= */
/* Container for legend control buttons */
.legend-controls {
  display: flex;  /* Horizontal layout for buttons */
  gap: 10px;  /* Space between buttons */
  margin-bottom: 10px;  /* Space below controls */
  justify-content: flex-end;  /* Align buttons to the right */
}

/* Legend control buttons */
.legend-controls button {
  padding: 6px 8px;  /* Internal spacing */
  border: none;  /* No border */
  border-radius: 6px;  /* Rounded corners */
  background: #eee;  /* Light gray background */
  color: #333;  /* Dark text */
  font-weight: bold;  /* Bold text */
  cursor: pointer;  /* Show clickable */
  transition: 0.2s;  /* Smooth state transition */
  font-size: 14px;  /* Button text size */
}

/* Legend button hover effect */
.legend-controls button:hover {
  background: #ddd;  /* Slightly darker on hover */
}

/* =============================================================================
   GIVENERGY SECTION STYLES
   ============================================================================= */
/* Container for GiveEnergy related content */
.givenergy-section {
  margin-top: 20px;  /* Space above section */
  border-top: 3px solid #ccc;  /* Gray line above section */
}

/* Heading within givenergy section */
.givenergy-section h2 {
  text-align: center;  /* Center the heading */
  margin-bottom: 20px;  /* Large space below heading */
  font-size: 30px;  /* Large heading size */
  margin-top: 20px;  /* Space above heading */
}

/* =============================================================================
   TOOLTIP STYLES
   ============================================================================= */
/* Container for header tooltips */
.header-tooltip {
  position: relative;  /* Allow absolutely positioned children */
  cursor: default;  /* Default cursor (not pointer) */
  display: inline-block;  /* Inline but with block properties */
}

/* Tooltip text that appears on hover */
.header-tooltip::after {
  content: attr(data-tooltip);  /* Display tooltip from data attribute */
  position: absolute;  /* Position relative to header */
  top: calc(100% + 8px);  /* Below element with spacing */
  left: 50%;  /* Horizontally center */
  transform: translateX(-50%);  /* Adjust for centering */
  background: #333;  /* Dark background */
  color: #fff;  /* White text */
  padding: 8px 12px;  /* Internal spacing */
  border-radius: 6px;  /* Rounded corners */
  font-size: 15px;  /* Tooltip font size */
  font-weight: normal;  /* Regular weight */
  white-space: normal;  /* Allow text wrapping */
  width: 300px;  /* Wider than tab tooltips */
  text-align: center;  /* Center text */
  pointer-events: none;  /* Don't interfere with mouse events */
  opacity: 0;  /* Hidden by default */
  transition: opacity 0.2s;  /* Smooth fade animation */
  z-index: 100;  /* Appear above other content */
}

/* Show tooltip on hover */
.header-tooltip:hover::after {
  opacity: 1;  /* Make tooltip visible */
}

/* =============================================================================
   LOADING SPINNER ANIMATION
   ============================================================================= */
/* Loading spinner element */
.chart-spinner {
  border: 6px solid #eee;  /* Outer gray border */
  border-top: 6px solid #3498db;  /* Colored border on top for animation */
  border-radius: 50%;  /* Make it circular */
  width: 40px;  /* Spinner size */
  height: 40px;  /* Square dimensions for circle */
  animation: spin 1s linear infinite;  /* Rotate continuously */
  position: absolute;  /* Position over chart */
  top: 50%;  /* Vertically centered */
  left: 50%;  /* Horizontally centered */
  transform: translate(-50%, -50%);  /* Adjust for center point */
  display: none;  /* Hidden by default */
  z-index: 10;  /* Appear above canvas but below tooltips */
}

/* Spin animation keyframes */
@keyframes spin {
  0% { transform: rotate(0deg); }  /* Start rotation at 0 degrees */
  100% { transform: rotate(360deg); }  /* Complete full rotation */
}
 /* Footer style */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 3px solid #ccc;
  font-size: 14px;
  color: #888;
}

/* =============================================================================
   DARK MODE STYLES
   ============================================================================= */
@media (prefers-color-scheme: dark) {
  body {
    background: #121212;  /* Very dark gray/black background */
    color: #e0e0e0;  /* Light gray text for contrast */
  }
  
  #uos-logo-light { display: none; }
  #uos-logo-dark  { display: block; }
  
  #sml-logo-light { display: none; }
  #sml-logo-dark  { display: block; }

  #ehl-logo-light { display: none; }
  #ehl-logo-dark  { display: block; }

  .chart-container {
    background: #1e1e1e !important;  /* Dark gray background */
    border-color: #333;  /* Dark border color */
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);  /* Stronger shadow for depth in dark mode */
  }

  #masterTabs {
    border-bottom-color: #444;  /* Dark gray border */
  }
  
  .tab {
    background: #222 !important;  /* Dark background */
    color: #ddd !important;  /* Light gray text */
  }

  .tab:hover {
    background: #333 !important;  /* Slightly lighter on hover */
  }

  .tab.active {
    background: #444 !important;  /* Medium dark gray background */
    color: #fff !important;  /* White text */
  }

  .chart-spinner {
    border-color: #444;  /* Dark border */
    border-top-color: #3498db;  /* Keep blue accent */
  }

  .legend-controls button {
    background: #444;  /* Dark background */
    color: #ddd;  /* Light gray text */
    border: 1px solid #555;
  }
  
  .givenergy-section {
    border-top-color: #444;  /* Dark border */
  }
  
  .section-header {
    border-top-color: #444;  /* Dark border */
  }
  
  .legend-controls button:hover {
    background: #333;  /* Slightly lighter on hover */
  }
  .footer {
    border-top-color: #444;
  }
}

/* Hide mobile-specific master tab on desktop layout */
.mobile-givenergy-tab {
   display: none !important;
}

/* =============================================================================
   RESPONSIVE DESIGN - SINGLE CONSOLIDATED MOBILE BLOCK (max 768px width)
   ============================================================================= */
@media (max-width: 768px) {

  /* Put a hard stop on global horizontal spilling and zooming into empty space */
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Reduce global body layout margin to maximize room */
  body {
    margin: 15px; 
  }
   
  #masterTabs {
   display: flex !important;  /* Override inline-flex from desktop */
   width: 100%;               /* Fill full screen width */
   box-sizing: border-box;
   overflow-x: hidden !important;  /* Override the tab-row scroll rule */
  }

  #masterTabs .master-tab {
   flex: 1 1 0 !important;
   display: flex !important;
   justify-content: center;
   align-items: center;
   overflow: hidden;
  }
   
   /* Turn the chart container into a column flexbox on mobile */
  .chart-section .chart-container {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Force the canvas wrapper to stay at the top */
  .chart-section .canvas-wrapper {
    order: 1 !important;
  }

  /* Force the legend control buttons to move to the bottom */
  .chart-section .legend-controls {
    order: 2 !important;
    margin-top: 5px; /* Adds a clean gap below the chart legend */
    margin-bottom: 5px;
    justify-content: center; /* Centers the buttons on mobile screens */
  }
   
  h1 {
     font-size: 24px !important;
     margin-bottom: 10px;
  }

  /* Section headers used for major content divisions */
  .section-header {
     text-align: center;   
     font-size: 30px;      
     margin-top: 0;        
     padding-top: 10px;    
     border-top: 3px solid #ccc;  
     margin-bottom: 0px;   
  }

  h2 {
     font-size: 20px !important;
     margin-bottom: 20px;
  }

  /* Keep logo bar in one row instead of stacking vertically */
  .logo-bar {
    flex-direction: row;      
    justify-content: space-between; 
    align-items: center;      
    gap: 10px;                
  }

  .logo-bar-left {
    gap: 10px;                
  }

  #uos-logo-light, #uos-logo-dark { width: 85px; }  
  #sml-logo-light, #sml-logo-dark { width: 105px; } 
  #ehl-logo-light, #ehl-logo-dark { width: 70px; }  
   
   .chart-section + h1 + .section-header, 
   h2.section-header:has(span[data-tooltip*="Monnit"]) {
      display: none;
  }
   
  /* Make the third master tab visible on mobile screens */
  .mobile-givenergy-tab {
    display: inline-flex !important;
  }

  /* HIDES THE ENTIRE SECONDARY CHART SECTION AT THE BOTTOM ON MOBILE */
  .givenergy-section {
    display: none !important;
  }

  /* Prevent chart card containers from spilling out horizontally on mobile devices */
  .chart-container {
    min-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
    padding: 10px;
  }

  /* Make tab rows horizontally scrollable on mobile */
  .tab-row {
    display: flex;                      
    flex-wrap: nowrap !important;       /* Force tabs onto a single horizontal line */
    overflow-x: auto !important;        /* Enable horizontal scrolling */
    -webkit-overflow-scrolling: touch;  /* Smooth inertial scrolling on iOS devices */
    padding-bottom: 10px;               /* Slightly increased to give scrollbar breathing room */
    gap: 8px;
  }
   
   .sub-tab-row {
      margin-bottom: 5px !important;     /* Removes the bottom margin spacing entirely */
   }
     
    /* For Firefox: Enable a clean, thin scrollbar */
   .tab-row {
     scrollbar-width: thin;
     scrollbar-color: #bbb rgba(0, 0, 0, 0.05);
   }

  /* Custom visible styling for WebKit scrollbars (Safari, Chrome, iOS/Android browsers) */
  .tab-row::-webkit-scrollbar {
    height: 5px;                        /* Sleek, thin horizontal scrollbar height */
    display: block;                     
  }

  .tab-row::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);   /* Translucent track background */
    border-radius: 10px;
  }

  .tab-row::-webkit-scrollbar-thumb {
    background: #bbb;                   /* Distinct thumb color so it's obviously scrollable */
    border-radius: 10px;
  }
   
  /* Compact tabs to make presentation cleaner and prevent shrinking inside the scroll view */
  .tab {
    font-size: 14px !important;
    padding: 8px 10px !important; 
    flex-shrink: 0 !important;    /* Prevents tabs from squishing or crushing together */
  }

  .master-tab {
    font-size: 16px !important;
    padding: 10px 12px !important;
  }
   
   .legend-controls button {
      flex: 1;
   }

  /* Hide hover tooltips on mobile to prevent clipping bugs inside scroll views */
  .tab::after, .header-tooltip::after {
    display: none !important;
  }
}