@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;700&display=swap');

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Mulish', sans-serif;
  overflow: hidden;
}

/* Navigation Bar */
.tab-bar {
  height: 40px;
  display: flex;
  justify-content: left;
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
}

.tab {
  padding: 0 15px;
  text-decoration: none;
  color: black;
  font-size: 16px;
  line-height: 40px;
}

.tab:hover {
  background-color: #f0f0f0;
}

.tab.active {
  background-color: #ccc;
  font-weight: bold;
}

/* Main Content Area */
.charts-container {
  height: calc(100% - 40px);
  display: flex;
  flex-direction: column;
}

/* Individual Chart Panels */
.chart-panel {
  flex: 1;
  width: 100%;
  position: relative; 
  overflow: hidden;
  border-bottom: 1px solid #eee;
}

/* THE MASK (Sits on TOP of the iframe) */
.chart-panel::after {
  content: "Loading Data...";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white; /* Solid cover */
  z-index: 10; /* Higher than iframe */
  
  /* Centering the text */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.1rem;
  color: #888;
  font-weight: 600;
  
  transition: opacity 0.8s ease-out, visibility 0.8s;
}

/* The Pulse Animation for the Text */
.chart-panel::after {
  animation: pulseBg 1.5s infinite alternate;
}

@keyframes pulseBg {
  0% { color: #888; }
  100% { color: #aaa; }
}

/* Iframes - Always Visible to Browser */
iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  z-index: 1; /* Lower than mask */
}

/* WHEN LOADED: Hide the Mask */
.chart-panel.loaded::after {
  opacity: 0;
  visibility: hidden; /* Stop it from blocking clicks */
}

/* Mobile Responsiveness */
@media (max-height: 600px) {
  body, html {
    overflow: auto;
  }
  .charts-container {
    height: auto;
    display: block;
  }
  .chart-panel {
    height: 50vh;
    min-height: 300px;
  }
}