:root {

  --active-bg-body: var(--bg-body-dark);  /* Locked to dark layout canvas */
  --active-bg-card: var(--bg-card-dark);  /* Locked to dark charcoal cards */
  --active-text: var(--text-main-dark);   /* Locked to silver text */
  --active-bars: var(--bars-border-dark); /* Locked to dark header trims */
  --active-bg-cardx: var(--bg-header-footer-dark);
  
  /* Layout Canvas Backgrounds */
  --bg-body-light: #e4e9f2; /* Soft light slate canvas */
  --bg-body-dark: #151819;  /* Deep dark canvas */
  
  /* Inner Card Backgrounds */
  --bg-card-light: #c9daf9; /* Light blue container interior */
  --bg-card-dark: #1f2024;  /* Dark charcoal container interior */
   
  /* Main UI Typography */
  --text-main-light: #1c4263; /* High-contrast dark blue */
  --text-main-dark: #c0c0c0;  /* Clear silver text */
  
  /* Card Border Accents (Top/Bottom Bars) */
  --bars-border-light: #b9cff7; /* Distinct light blue */
  --bars-border-dark: #25282c;  /* Deep dark trim */
  
  /* header and footer background colors */
  --bg-header-footer-light: #b9cff7; /* Distinct light blue */
  --bg-header-footer-dark: #25282c;  /* Deep dark */

  /* Global Layout Dimensions */
  --header-height: 60px;
  --card-width: 315px;
  --card-height: 195px;
  --menu-width: 280px;
  --gap: 4px;
  --font: Helvetica, Arial, sans-serif;
  
  /* useable Color Palette Indices */
  --col-1: #151819;  --col-2: #1f2024;  --col-3: #26282c;
  --col-4: #2e8b57;  --col-5: #488fcc;  --col-6: silver;
  --col-7: #000000;  --col-8: #00FF00;  --col-9: #FF0000;
  --col-10: #2d2f32; --col-11: #ffffff; --col-12: #47494d;
  --col-13: #393d40; --col-14: #999999; --col-15: #393d40;
  --col-16: #3b3c3f; --col-17: #ffffff; --col-18: #38383c;
  --col-19: #000000; --col-20: #b9cff7; --col-21: #c0c0c0;
  --col-22: #26282c; --col-23: #3b3c3f;
  --col-100: #292E35; 
}

html[data-theme="light"] body {
  --col-4: #488fcc;
  --time: #1c4263;
  --col-12: #898990;
  --col-14: #999999;
  --col-10: #e0eafb;
  --col-23: #c0c0c0;
  --col-101: #c9daf9;
  --col-6: #1c4263;
  --col-200: transparent;
  --col-201: #1c4263;
  --active-bg-cardx: var(--bg-header-footer-light);
  --active-bg-body: var(--bg-body-light);
  --active-bg-card: var(--bg-card-light);
  --active-text: var(--text-main-light);
  --active-bars: var(--bars-border-light);
  --light-card: #ccdaf6;
 
 /* Shared Gauge css using dynamic light theme properties */
.gauge .domain { stroke-width: 0px; stroke: rgba(59,60,63,1); }
.gauge .tick line { stroke: rgba(255,99,71,1); stroke-width:1px; stroke-linecap: round; }
.gauge line { stroke: var(--col-23); stroke-width: 0.75px; stroke-linecap: round; }
.gauge .arc, .gauge .cursor { stroke: rgba(59,60,63,0); stroke-width: 2px; fill: rgba(59,60,63,0); }
.gauge .major { fill: var(--col-6); font-size: 8px; font-family: arial; font-weight: normal; letter-spacing: .015rem; }
.gauge .indicator { stroke: rgba(255,0,0,1); fill: #000; stroke-width: 1px; }
.gauge circle { stroke: #c0c0c0; fill: #c0c0c0; }

.thermometer .tick text, .gSolarRad .tick text {
    fill: var(--active-text) !important;
    color: var(--active-text) !important;
}
.thermometer .tick line, .gSolarRad .tick line {
    fill: var(--col-14) !important;
    color: var(--col-14) !important;
     
}}

html[data-theme="dark"] body {
  --col-4: #2e8b57;
  --time: white;
  --col-12: #47494d;
  --col-14: #999999;
  --col-10: #2d2f32;
  --col-23: #3b3c3f;
  --col-101: #1f2024;
  --col-6: silver;
  --col-200: #233042;
  --col-201: transparent;
  --active-bg-cardx: var(--bg-header-footer-dark);
  --active-bg-body: var(--bg-body-dark);
  --active-bg-card: var(--bg-card-dark);
  --active-text: var(--text-main-dark);
  --active-bars: var(--bars-border-dark);
  --dark-card: #0f3460;
  
/* Shared Gauge css using dynamic dark theme properties */
.gauge .domain { stroke-width: 0px; stroke: rgba(59,60,63,1); }
.gauge .tick line { stroke: rgba(255,99,71,1); stroke-width: 1px; stroke-linecap: round; }        
.gauge line { stroke: #3b3c3f; stroke-width: 0.75px; stroke-linecap: round; }               
.gauge .arc, .gauge .cursor { stroke: rgba(59,60,63,0); stroke-width: 2px; fill: rgba(59,60,63,0); }
.gauge .major { fill: var(--active-text); font-size: 8px; font-family: arial; font-weight: normal; letter-spacing: .015rem; }       
.gauge .indicator { stroke: rgba(255,0,0,1); fill: #000; stroke-width: 1px; }                
.gauge circle { stroke: rgba(59,60,63,1); fill: rgba(59,60,63,1); }

.thermometer .tick text, .gSolarRad .tick text {
    fill: var(--active-text) !important;
    color: var(--active-text) !important;
}
.thermometer .tick line, .gSolarRad .tick line {
    fill: var(--col-14) !important;
    color: var(--col-14) !important;
    
}}

/* Gauge Module positions */
.anemometer, .compass, .solar, .uvi, 
.barometer, .humidity, .thermometer, .rainfall, .stationtime { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  margin-top: 1.5px; 
  margin-left: 0px; 
}

.unselectable { 
  -moz-user-select: none; 
  -khtml-user-select: none; 
  -webkit-user-select: none; 
  -ms-user-select: none; 
  user-select: none; 
}

/* Global Body setup using the Switchboard mapping */
body {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  background-color: var(--active-bg-body);
  color: var(--active-text);
  overflow-x: hidden;
}

/* Main Wrapper for layout grid */
.wrapper {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(5, var(--card-width));
  gap: var(--gap);
  margin: 10px auto;
  max-width: calc(var(--card-width) * 5 + var(--gap) * 4);
  padding: 0 10px;
  position: relative;
  z-index: 1;
}

/* Header & Footer bars */
  header {
  grid-column: 1 / -1;
  width: 100%;
  background: var(--active-bg-cardx);
  border-radius: 8px;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  height: var(--header-height);
  z-index: 100;
  position: relative;
  color: #ffa500; /* Main Title remains bright warning color */
}

  footer {
  grid-column: 1 / -1;
  width: 100%;
  background: var(--active-bg-cardx);
  border-radius: 8px;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  height: var(--header-height);
  z-index: 100;
  position: relative;
  color: #ffa500;
  gap: 15px;
}

/* Controls inside header area */
.header-controls {
  display: flex;
  align-items: center;
  gap: 15px;
}

.unit-selector {
  background: rgba(255,255,255,0.2);
  color: var(--active-text);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 12px;
  cursor: pointer;
  outline: none;
}
.unit-selector option {
  background: var(--active-bg-card);
  color: var(--active-text);
}

/* Media Query scales */
@media screen and (max-width: 1720px) { .wrapper { grid-template-columns: repeat(4, var(--card-width)); max-width: calc(var(--card-width) * 4 + var(--gap) * 3); } }
@media screen and (max-width: 1380px) { .wrapper { grid-template-columns: repeat(3, var(--card-width)); max-width: calc(var(--card-width) * 3 + var(--gap) * 2); } }
@media screen and (max-width: 1040px) { .wrapper { grid-template-columns: repeat(2, var(--card-width)); max-width: calc(var(--card-width) * 2 + var(--gap) * 1); } }
@media screen and (max-width: 700px)  { .wrapper { grid-template-columns: var(--card-width); max-width: var(--card-width); justify-content: center; } }
@media screen and (max-width: 400px) {
  .wrapper { grid-template-columns: minmax(280px, var(--card-width)); max-width: 100%; padding: 0 10px; }
  .card { width: 100%; max-width: var(--card-width); margin: 0 auto; } 
  .header-controls { gap: 5px; } 
  .unit-selector { max-width: 80px; font-size: 10px; padding: 4px; }
}

.cards-container { display: contents; }

/* Fully Unified Card Element: Handles both light and dark automatically */
.card {
  width: var(--card-width);
  height: var(--card-height);
  border-radius: 5px;
  background: var(--active-bg-card);
  border-top: solid var(--active-bars) 20px;
  border-bottom: solid var(--active-bars) 18px;
  color: var(--active-text);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  user-select: none;
  padding: 3.5px 2.5px;
  overflow-y: visible;
  overflow-x: visible;
}

.card::-webkit-scrollbar { width: 4px; }
.card::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); border-radius: 4px; }
.card::-webkit-scrollbar-thumb { background: #ff6b6b; border-radius: 4px; }

.card-header {
  font-size: 12px;
  font-weight: 700;
  color: #ff6b6b;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 1px solid rgba(255,107,107,0.3);
  padding-bottom: 2px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
.card.has-many-rows { overflow: hidden !important; }
.card-row { flex-shrink: 0; }

/* Card header label text positioning inside structural borders */
.card-label {
  display: block;      
  text-align: center;
  color: var(--active-text); 
  font-weight: normal;
  font-size: 11px;     
  width: 100%;
  margin-top: -23px;   
  line-height: 20px;   
  position: relative;  
}

.card-link {
  display: block;      
  text-align: left;
  color: var(--active-text); 
  font-weight: normal;
  font-size: 11px;     
  width: 100%;
  margin-left: -300px;
  margin-top: 176px;   
  line-height: 20px;   
  position: relative;  
}

/* For cards with many rows, allow them to be scrollable */
.card.has-many-rows {
  overflow-y: auto;
}

/* Fixed card (first one) - different styling */
.card.fixed {
  background: linear-gradient(135deg, var(--light-card) 0%, #e0e8f5 100%);
  border-color: #ff6b6b;
  cursor: default;
}
body.dark .card.fixed {
  background: linear-gradient(135deg, var(--dark-card) 0%, #1a2a4a 100%);
  border-color: #ff6b6b;
}
.card.fixed:active {
  cursor: default;
}

/* Dragging */
.dragging {
  opacity: 0.5;
  transform: scale(0.98);
  cursor: grabbing;
}

/* Drag over indicator */
.drag-over {
  border-top: 3px solid #ff6b6b;
  transform: translateY(-1px);
}

/* Hamburger Navigation Button */
.menu-btn {
  width: 30px;
  height: 22px;
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 200;
}

.menu-btn span {
  height: 3px;
  width: 100%;
  background: orange;
  border-radius: 2px;
  transition: 0.4s ease;
  transform-origin: center;
}

body.menu-open .menu-btn span:nth-child(1) {
  transform: rotate(45deg) translateY(9px);
}
body.menu-open .menu-btn span:nth-child(2) {
  opacity: 0;
}
body.menu-open .menu-btn span:nth-child(3) {
  transform: rotate(-45deg) translateY(-9px);
}

.theme-icon-mask {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: -8px;
  margin-bottom: -3px;
  margin-right: -9px;
 
  /* Link your SVG file here */
  -webkit-mask: url('sun.svg') no-repeat center / contain;
  mask: url('sun.svg') no-repeat center / contain;
  
    /* Smoothly animates the color change */
  transition: background-color 0.3s ease; 
}

/* Light Theme Color */
body.light .theme-icon-mask {
  background-color: #25282c;
}

/* Dark Theme Color */
body.dark .theme-icon-mask {
  background-color: #b9cff7;
}

/* Theme Toggle Trigger Button */
#themeToggle {
  font-size: 22px;
  background: none;
  border: none;
  cursor: pointer;
  color: orange;
  z-index: 200;
}

/* Side Panel - Fully Dynamic */
.menu {
  position: fixed;
  top: 0;
  left: calc(-1 * var(--menu-width));
  width: var(--menu-width);
  height: 100vh;
  background: var(--active-bg-card); 
  color: var(--active-text);         
  padding: 20px;
  padding-top: calc(var(--header-height) - 35px);
  transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 2px 0 10px rgba(0,0,0,0.2);
  z-index: 1000;
  overflow: auto;
  box-sizing: border-box;
}

body.menu-open .menu {
  left: 0;
}

/* Background Dimmer Layer turned off ! */
.overlay {
  position: fixed;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 900;
  pointer-events: none;
}

body.menu-open .overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Station Info Box */
.station-info {
  padding-bottom: 0px;
}

/* Sub-headers inside Slide Menu */
.menu-section {
  color: #ffa500;
  font-size: 16px;
  font-weight: 600;
  margin: 1px 0 10px 0;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,107,107,0.3);
}

/* Global Loading placeholder */
.loading {
  text-align: center;
  padding: 40px;
  font-size: 18px;
  color: #ff6b6b;
  grid-column: 1 / -1;
}

/* Main Brand Header Location */
.location-header {
  font-size: 18px;
  font-weight: 600;
  color: orange;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Standard Error Output Boxes */
.error {
  color: #ff6b6b;
  text-align: center;
  padding: 20px;
  font-size: 16px;
  grid-column: 1 / -1;
}

/* Data rows inside menu */
.menu-item {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 12px;
  font-weight: normal;
  border-bottom: 1px solid rgba(120, 120, 120, 0.15); 
}

.menu-item-label {
  color: var(--active-text);
  opacity: 0.8; 
  font-weight: 500;
}

.menu-item-value {
  opacity: 0.8; 
  font-weight: 500;
  color: var(--active-text);
}

/* --- COMPACT ADAPTIVE SIDEBAR ECG PANEL (SEAMLESS VECTOR ENGINE) --- */

/* Clean layout overrides to block default row flex-stretch mechanics */
.menu-item.ecg-panel-item {
  display: block !important; 
  padding: 8px 0 8px 0; 
  border-bottom: 1px solid rgba(120, 120, 120, 0.15); /* Preserves theme line */
}

/* Local wrapper utilizing container context matching your active text definitions */
.ecg-monitor-wrapper {
  color: #37af8c;
  font-family: "Exo 2", sans-serif;
  text-shadow: 0 0 4px #37af8c;
  position: relative;
  overflow: hidden;
  background: #25282c;
  border: 1px solid rgba(55, 175, 140, 0.25);
  padding: 8px;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%; /* Tracks var(--menu-width) flawlessly */
}

/* Local Scanline Texture layer inside the module box bounds */
.ecg-monitor-wrapper .scanlines-overlay {
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.35) 80%
  );
  background-size: 100% 4px;
  display: block;
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 5;
  pointer-events: none;
}

/* Small data descriptor strings */
.ecg-monitor-wrapper .ecg-header-row {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  margin-bottom: 6px;
  opacity: 0.75;
  font-family: "Source Code Pro", monospace;
}

/* Embedded local flex split layout strictly for internally pairing graph and number text */
.ecg-monitor-wrapper .ecg-display-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 
   FIXED LAYER: Single, seamless background container.
   Instead of a traveling mask, we scroll an infinitely repeating heartbeat vector path pattern.
*/
.ecg-monitor-wrapper .graph {
  flex: 1;
  outline: 1px #37af8c solid;
  border-radius: 4px;
  box-sizing: border-box;
  height: 80px;
  position: relative;  
  overflow: hidden;
  background-color: #151515;  
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cGF0aCBkPSJNMCA1MCBIMTUgQzIwIDUwIDIyIDI1IDI1IDI1IEMyOCAyNSAzMCA4NSAzMyA4NSBDMzYgODUgNDAgNSA0MyA5IEM0NiA5IDUwIDY1IDUzIDY1IEM1NiA2NSA2MCA1MCA2NSA1MCBIMTAwIiBzdHJva2U9IiMzN2FmOGMiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+");

  background-size: 100px 100%;
  background-repeat: repeat-x;
  filter: drop-shadow(0px 0px 5px #37af8c);
  animation: ecg-flow-forward 1.2s infinite linear;
}

/* Unused cell layers cleaned up so you don't have to change your existing HTML code layout */
.ecg-monitor-wrapper .cell {
  display: none !important;
}

/* Numeric Right Panel block */
.ecg-monitor-wrapper .heart-rate-block {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 55px;
}

.ecg-monitor-wrapper .number-1 {
  font-size: 2.4rem; 
  font-weight: 700;
  line-height: 1;
  position: relative;
  color: #37af8c;
  padding-left: 12px;
}

.ecg-monitor-wrapper .number-1::after {
  content: "2";
  position: relative;
  display: inline-block;
}

/* Pulsing Decorative Glyph Marker icon settings */
.ecg-monitor-wrapper .number-1 span {
  font-size: 0.9rem;
  position: absolute;
  top: 4px;
  left: -2px;
  animation: ecg-beat 1s infinite;
}

@keyframes ecg-beat {
  0%, 35%, 60%, 100% { transform: scale(1); opacity: 1; }
  45% { transform: scale(0.8); opacity: 0.3; }
}

/* 
   New Flow Animation: Smoothly and endlessly shifts the background line coordinate positions 
   from left to right across the side panel without any clipping or edge gaps.
*/

@keyframes ecg-flow-forward {
  0% { background-position: 0px 0; }
  100% { background-position: 100px 0; }
}
/* --- END COMPACT ADAPTIVE SIDEBAR ECG PANEL --- */



.chartforecast,.chartforecastlink {position:absolute;}
.chartforecast,.chartforecastlink,a{font-family:arial,system;z-index:20;}
.chartforecast,.chartforecastlink {padding-top:5px;}
.chartforecast{margin-left:0;font-size:0.67em;color:var(--col-6);margin-top:155px;width:300px;padding-left:10px;text-align:left;}
.chartforecastlink{margin-left:0;font-size:0.67em;color:var(--col-6);margin-top:155px;width:300px;padding-left:10px;text-align:left;}
.chartforecast:hover,.menu li a:hover{color:#90b12a;}
.yearpopup{margin-left:5px;}