/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: 'Orbitron', Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #f4f4f4;
  color: #333;
  overflow-x: hidden;
}

/* ---------- Dashboard Grid ---------- */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1fr, 1fr);
  grid-auto-rows: minmax(min-content, auto);
  gap: 1rem;
  padding: 1rem;
  height: calc(100vh - 60px);
  overflow: hidden;
}

/* ---------- Panels ---------- */
.panel {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, z-index 0s linear 0.2s;
  overflow: hidden;
  width: 100%;
}

.panel:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.12);
}

.panel.active {
  transition: transform 0.5s ease, z-index 0s;
  z-index: 10;
}

.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: clamp(1rem, 2vw, 1.5rem);
  margin: 0 0 1rem 0;
  width: 100%;
}

.panel-logo {
  height: 60px;
  width: auto;
  margin-left: 1rem;
}

#last-7-days,
#last-12-months {
  position: relative;         /* allow positioning of canvas */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;  /* align content (the chart) to the bottom */
  padding-bottom: 5%;         /* bottom spacing */
  overflow: hidden;           /* prevent any chart overflow */
}

#last-7-days canvas,
#last-12-months canvas {
  height: 90% !important;     /* 70% of panel height */
  max-height: 95% !important; /* never exceed this height */
  width: 100% !important;     /* keep full width */
  object-fit: contain;        /* scale proportionally */
}

#last-7-days {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;       /* allow normal responsive resizing */
  justify-content: flex-start;
  overflow: visible;     /* allow tooltips */
  padding-bottom: 0;     /* remove flex/padding conflict */
}

/* ---------- Typography ---------- */
h2 {
  margin: 0 0 1rem 0;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 500;
  text-align: center;
}

h3 {
  margin: 0 0 0.5rem 0;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 500;
  text-align: center;
}

p {
  margin: 0.25rem 0;
  font-size: clamp(0.9rem, 1vw, 1rem);
  text-align: center;
}

/* ---------- Dial ---------- */
.dial-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70%;
  max-width: 260px;
  aspect-ratio: 1 / 1;
  margin: auto;
}

/* PV chart behind everything */
#pvBackgroundChart {
  position: absolute;
  bottom: 5%;          /* aligns it 5% above the panel bottom */
  left: 0;
  width: 100%;         /* full width of panel */
  height: 70%;         /* 70% of the panel height */
  max-height: 200px;     /* ensures it never exceeds 70% */
  z-index: 0;          /* sits behind other elements like the dial */
  pointer-events: none; /* prevents blocking clicks */
}

#batteryBackgroundChart {
  position: absolute;
  bottom: 5%;          /* aligns it 5% above the panel bottom */
  left: 0;
  width: 100%;         /* full width of panel */
  height: 70%;         /* 70% of the panel height */
  max-height: 200px;     /* ensures it never exceeds 70% */
  z-index: 0;          /* sits behind other elements like the dial */
  pointer-events: none; /* prevents blocking clicks */
}

#batteryPanel {
  position: relative; /* needed for background layering */
}

#currentGenPanel {
  position: relative; /* so the canvas positions relative to the panel */
  overflow: hidden;
}


/* Dial on top */
#powerDial {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}


.power-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--power-value-color, #0072ce);
  font-family: 'Orbitron', sans-serif;
  font-weight: var(--power-value-font-weight, bold);
  text-align: center;
  font-size: clamp(1rem, 6vw, 3rem);
  width: 100%;
  z-index: 2;
}

/* ---------- System Info Panel ---------- */
#systemInfo {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
}

#systemInfo table {
  width: 100%;
  margin-top: 0.25rem;
  border-collapse: collapse;
  font-size: clamp(0.8rem, 1vw, 1rem);
}
#systemInfo td {  
  padding: 0.25rem 0.5rem;
}

#systemInfo.panel {
  padding-top: 0.75rem;
  padding-left: 1rem; 
  padding-right: 1rem;
  padding-bottom: 1rem;
}

#systemInfo tr:last-child td {
  border-bottom: none;
}

#systemInfo tr:nth-child(even) {
  background: #f9f9f9;
}

#systemInfo tr:nth-child(odd) {
  background: #fff;
}

#systemInfo td:first-child {
  width: 55%;
  color: #555;
  font-weight: normal;
  text-align: left;
  padding-right: 0.5rem;
}

#systemInfo td:last-child {
  font-weight: bold;
  color: #0072ce;
  text-align: left;
  padding-left: 0.5rem;
}

#systemInfo td span.unit {
  font-weight: normal;
  color: #888;
  margin-left: 0.2rem;
}

#systemInfo .panel-title {
  justify-content: center;      /* centers both text and logo */
  gap: 0.5rem;                  /* adds space between them */
  text-align: center;
  flex-wrap: wrap;              /* handle multiline on smaller screens */
}
#systemInfo .panel-logo {               
  margin: 0;
}

#systemInfoTable {
  display: flex;
  flex-direction: column;
  align-items: center; /* horizontally centre everything */
}

#stationInfoTable {
  width: 100%;
  text-align: center; /* centres table content */
}

/* ---------- Canvas ---------- */
canvas {
  max-width: 100%;
  height: auto !important;
}

/* ---------- Rotate Button ---------- */
#rotateButton {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 1rem;
  background-color: #0072ce;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.6;
  z-index: 100;
  transition: background-color 0.3s, opacity 0.3s;
}

#rotateButton.active {
  background-color: grey;
}

/* ---------- Shared 3-column row grid ---------- */
.row-3-grid {
  display: grid;
  grid-template-columns: 3fr 4fr 3fr; /* 30–40–30 split */
  gap: 12px;
  width: 100%;
  align-items: stretch;
}

/* Reduce table padding inside info panel */
#systemInfoTable table, #infoTable {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(0.8rem, 1.1vw, 1rem);
}

#infoTable td {
  padding: 0.3rem 0.5rem;
}

/* Grid + Home Usage combo */
#gridUsagePanel {
  transition: background-color 0.3s;
}

#gridUsagePanel.importing {
  background-color: #dd3a3ad0;
  color: white;
}

#gridUsagePanel.exporting {
  background-color: #1ec957cf;
  color: white;
}

/* Ensure Home Usage text inside grid panel fits well */
#gridUsagePanel .usage-info p {
  margin: 0.25rem 0;
  text-align: center;
}

#system-info-grid {
  display: grid;
  grid-template-columns: 3fr 4fr 3fr;
  gap: 12px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Match overall styling with upper section */
#system-info-grid .gen-cell h3 {
  margin-bottom: 0.5rem;
}



/* ---------- Generation Grid (2 rows x 3 cols) ---------- */
#generation-grid-container {
  display: grid;
  grid-template-columns: 3fr 4fr 3fr;  /* keeps your 30–40–30 ratio */
  gap: 12px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;   /* ensures padding/borders don’t push it wider */
  overflow: hidden;         /* hides any stray overflow */
}

/* Panel positions 
#currentGenPanel      { grid-column: 1; grid-row: 1; }
#dailyStatsPanel      { grid-column: 2; grid-row: 1; }
#gridIndicatorPanel   { grid-column: 3; grid-row: 1; }
#batteryPanel         { grid-column: 1; grid-row: 2; }
#eddiPanel            { grid-column: 2; grid-row: 2; }
#usagePanel           { grid-column: 3; grid-row: 2; }

/* ---------- Cells ---------- */
.gen-cell {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 0.25rem;
  box-sizing: border-box;
  background-color: rgba(0,0,0,0.03); /* faint background */
  border-radius: 8px;
  min-width: 0;
}

/* Align h3 to top */
.gen-cell h3 {
  margin: 0 0 0.5rem 0;
  font-size: clamp(0.8rem, 1.2vw, 1rem);
  font-weight: 500;
  color: #222;
  align-self: center;
}

/* ---------- Text formatting like systemInfo table ---------- */
.gen-cell p,
.gen-cell .grid-totals p {
  margin: 0.25rem 0;
  font-size: clamp(0.9rem, 1vw, 1rem);
  text-align: center; /* labels on left like table */
  width: 100%;
}

/* Label / value / unit formatting */
.gen-cell p .label {
  font-weight: normal;
  color: #555; 
}

.gen-cell p .value {
  font-weight: bold;
  color: #0072ce; /* default blue for most values */
}

.gen-cell p .home-value {
  font-weight: bold;
  color: #fefefe; /* default blue for most values */
}

/* Special colours for import/export */
.gen-cell p .value.imported {
  color: #c94b1d; /* red/orange for imported */
}

.gen-cell p .value.exported {
  color: #1b9e4b; /* green for exported */
}

.gen-cell p .unit {
  font-weight: normal;
  color: #888;
  margin-left: 0.2rem;
}

/* --- Daily Stats Grid Layout --- */
.daily-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* two equal columns */
  grid-template-rows: auto auto auto;
  gap: 12px;
  width: 100%;
}

.daily-grid .daily-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  text-align: center;
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical centering */
  align-items: center;     /* horizontal centering */
}

.daily-grid .daily-item.full-width {
  grid-column: 1 / -1;  /* span both columns */
}

.battery-item .battery-daily-grid {
  display: flex;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  text-align: center;
}


.battery-item .value.discharge {
  color: #b30000; /* red */
  text-align: center;
}

.battery-item .value.charge {
  color: #009933; /* green */
  text-align: center;
}


/* Optional distinct colours */
.gen-cell p .value.charge {
  color: #1b9e4b; 
}

.gen-cell p .value.yield {
  color: #0072ce; 
}

#dailyStatsPanel {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;         /* prevent anything spilling out */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;      /* horizontally center everything */
}

#dailyStatsPanel .daily-grid {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;         /* prevent nested overflow */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: stretch;
  justify-items: center;    /* keeps grid items centered within columns */
}

#dailyStatsPanel .daily-item {
  max-width: 100%;
  overflow: hidden;
  word-wrap: break-word;    /* if text is long */
  text-align: center;
}



/* Eddi Panel */
.eddi-panel {
    display: flex;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start; /* not center, prevents shrinking issue */
    flex-direction: row;
    gap: 10px;
    align-items: stretch;  /* key: make columns equal height */
}

/* Tank Column */
.eddi-tank-col {
    flex: 0 0 150px;        /* fixed width on wide screens */
    min-width: 60px;       /* prevent collapsing */
    max-width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
}

/* Status Column */
.eddi-status-col {
    flex: 1 1 auto;        /* take remaining space */
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0.5rem;
    border-radius: 8px;
    transition: background-color 0.5s ease;
}



/* Tank Bar */
.tank-bar {
    width: 100%;           /* fill column width */
    flex: 1 1 auto;        /* grow vertically to fill parent */
    min-height: 50px;      /* ensures it is always visible */
    max-height: 80%;
    border-radius: 8px;
    background-color: blue;
    box-sizing: border-box;
    display: flex;
  flex-direction: column;
  justify-content: space-between; /* top/middle/bottom spacing */
  align-items: center;
  padding: 5px 0;
}


.tank-segment {
  width: 80%;
  height: 20px; /* height of each reading block */
  border-radius: 4px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: bold;
}

/* Main Status Column */
.eddi-status-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}


/* Eddi Buttons */
.eddi-btn {
  font-family: 'Orbitron', sans-serif;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  background-color: rgba(61, 60, 60, 0.11);
  color: #000000ff;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  text-align: center;
  font-size: clamp(0.8rem, 1.5vw, 1rem);
  min-width: 80px;       /* reduce min width for mobile */
  padding: 0.4rem 0.8rem;
}

.eddi-btn:hover {
  background-color: #1558b0;
  transform: scale(1.05);
}

.eddi-btn:active {
  transform: scale(0.98);
}

#eddiButtonContainer {
  display: flex;
  justify-content: center; /* horizontal center */
  margin-top: 1rem;        /* optional spacing above */
  gap: 1rem;               /* space between buttons if more than one */
}


/* ---------- Status Colors ---------- */
.eddi-status-paused {
    background-color: transparent; /* no background */
    animation: none;
}

.eddi-status-diverting {
    background-color: #a6f2a1; /* soft green */
    animation: pulseGreen 3s infinite;
}

.eddi-status-boost {
    background-color: #ffb347; /* soft orange */
    animation: none;
}

.eddi-status-max-temp {
    background-color: #f28b82; /* soft red */
    animation: pulseRed 2s infinite;
}

/* ---------- Pulsing Animations ---------- */
@keyframes pulseGreen {
    0%, 100% { background-color: #a6f2a1; transform: scale(1); }
    50% { background-color: #88e07f; transform: scale(1.02); }
}

@keyframes pulseRed {
    0%, 100% { background-color: #f28b82; transform: scale(1); }
    50% { background-color: #e06666; transform: scale(1.02); }
}

@keyframes pulseDiverting {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* ---------- Dial ---------- */
#currentGenPanel .dial-container {
  width:50%; 
  max-width: 120px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  padding: 0;
  position: relative;
}

#currentGenPanel .power-value {
  font-size: clamp(0.8rem, 2vw, 1.5rem);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #0072ce;
  font-weight: bold;
  width: 100%;
}

/* ---------- Battery ---------- */
#batteryPanel .battery-soc {
  display: flex;                 /* make it a flex container */
  justify-content: center;       /* center horizontally */
  align-items: center;           /* center vertically */
  
  font-weight: bold;
  font-size: clamp(0.8rem, 1.2vw, 1rem);
  color: #fff;
  background-color: rgb(201, 75, 29);
  text-align: center;
  padding: 4px 8px;
  border-radius: 6px;
  width: 80%;
  min-width: 40px;
  margin: 0 auto;
}

/* ---------- Grid indicators ---------- */
.grid-status {
  display: flex;
  justify-content: center;   /* horizontally center */
  align-items: center;       /* vertically center */
  gap: 0.5rem;               /* optional spacing between spans */
  height: 40%;              /* ensures full height for vertical centering */
  color: #fff;
}

/* keep your existing span styles */
.grid-status span.grid-import {
  background-color: #a84e47;
  color: #fff;
  font-weight: bold;
  padding: 6px 12px;
  border-radius: 6px;
  text-align: center;
}

.grid-status span.grid-export {
  background-color: #4da350;
  color: #fff;
  font-weight: bold;
  padding: 6px 12px;
  border-radius: 6px;
  text-align: center;
}

/* Grid import/export colour states */
#gridIndicatorPanel.importing {
  background-color: #dd3a3ad0; /* red background */
  color: white;
}
#gridIndicatorPanel.exporting {
  background-color: #1ec957cf; /* green background */
  color: white;
}

/* Battery charging/discharging display */
#batteryPanel.charging {
  background-color: #009933; /* green when charging */
  color: white;
}
#batteryPanel.discharging {
  background-color: #b30000; /* red when discharging */
  color: white;
}

#batteryPanel {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#batteryPanel .battery-soc {
  position: relative;
  width: 80%;
  max-width: 120px;
  height: 40px;
  background-color: rgba(0,0,0,0.1);
  border-radius: 8px;
  overflow: hidden;
  margin: 0.5rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white;
}

/* The coloured fill portion */
#batteryPanel .battery-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%; /* dynamic via JS */
  height: 100%;
  background-color: hsl(0, 75%, 45%);
  border-radius: 8px 0 0 8px;
  transition: width 0.6s ease, background-color 0.6s ease;
}

/* Text overlay */
#batteryPanel .battery-text {
  position: relative;
  z-index: 2;
  text-align: center;
}

#batteryPanel .battery-status {
  margin-top: 0.3rem;
  font-size: 0.9rem;
  text-align: center;
}


/* Optional: add smooth transitions */
#gridIndicatorPanel,
#batteryPanel {
  transition: background-color 0.6s ease, color 0.6s ease;
}

/* Style for displaying power values below battery/grid */
.status-info {
  font-size: 1.1em;
  font-weight: bold;
  margin-top: 6px;
  text-align: center;
}

/* Pulsing the whole panel */
#gridIndicatorPanel.pulse-import {
  animation: pulseImport 4s infinite;
}

#gridIndicatorPanel.pulse-export {
  animation: pulseExport 4s infinite;
}

@keyframes pulseImport {
  0%, 100% { background-color: #ea4a4a; transform: scale(1); }
  50% { background-color: #ea4a4ae0; transform: scale(0.98); }
}

@keyframes pulseExport {
  0%, 100% { background-color: #2c9950; transform: scale(1); }
  50% { background-color: #2c9950df; transform: scale(1.02); }
}


/* ---------- CSS Variables ---------- */
:root {
  --dial-main-color: #f59642ac;
  --dial-bg-color: #e0e0e0a8;
  --dial-cutout: 70%;
  --chart-line-color: #0072ce;
  --chart-fill-color: rgba(0,114,206,0.2);
  --power-value-color: #0072ce;
  --power-value-font-weight: bold;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .dashboard-grid { grid-template-columns: 1fr; grid-template-rows: auto; height: auto;overflow: visible; }
  .panel { width: 100%; padding: 1rem; align-items: stretch; height: auto;}
  .dial-container { width: 60%; max-width: 220px; }
  #systemInfo table { width: 70%; }
  #rotateButton { display: none; }
  .top-row, .bottom-row { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  /* Make dashboard grid vertical but full width */
  .dashboard-grid {
    grid-template-columns: 1fr; 
    grid-template-rows: auto;
    gap: 0.8rem;
    padding: 1rem;
    height: auto;
    overflow: visible;
  }

    /* Panels should stretch full width */
  .panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;       /* prevent shrinking overflow */
    align-items: stretch; /* children stretch horizontally */
    height: auto;
  }

    /* Grid and Home usage panels: fix alignment */
  #gridUsagePanel,
  #homeUsagePanel {
    width: 100%;
    max-width: 100%;
    margin: 0;          /* remove any centering */
    align-self: stretch; /* ensure full width in parent */
  }
    /* Internal content alignment */
  #gridUsagePanel .usage-info,
  #homeUsagePanel .usage-info {
    text-align: left;   /* optional: aligns text left inside panels */
    width: 100%;
  }

  /* Fix Eddi panel stacking */
  .eddi-panel {
    flex-direction: column;
    align-items: stretch;
    height: auto;
  }

  .eddi-tank-col {
    flex: 1 1 100%;
    width: 100%;
    margin-bottom: 10px;
  }

  .eddi-status-col {
    flex: 1 1 100%;
    width: 80%;
    margin-bottom: 10px;
  }

  /* Boost buttons full width */
  .eddi-btn {
    width: 60%;
    min-width: unset;
  }

  /* Tank bar scaled down */
  .tank-bar {
    width: 80%;
  }



#systemInfo {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;       /* center horizontally */
    justify-content: flex-start;
    padding: 0.5rem;
    height: auto;
    box-sizing: border-box;
  }

  #system-info-grid {
    width: 100%;
    display: flex;
    flex-direction: column;    /* stack the three sections */
    gap: 0.5rem;
    align-items: stretch;      /* make children fill width */
    height: auto;
  }


  /* Hide system info table */
  #systemInfoTable {
    display: none;
  }

  .eddi-panel {
    width: 75%;               /* full width on small screens */
    flex-direction: column;
    align-items: stretch;
  }

  .eddi-tank-col,
  .eddi-status-col {
    width: 100%;               /* fill parent width */
  }

  #gridIndicatorPanel {
    width: 100%;               /* fill parent */
  }
  #gridIndicatorPanel {
    grid-column: 1 / -1; /* span entire single column */
    width: 100%;
  }

}

@media (min-aspect-ratio: 16/9) {
  .power-value { font-size: clamp(1rem, 7vw, 3.5rem); }
}

@media (max-width: 1100px) and (max-height: 650px) {
  .dashboard-grid { gap: 0.5rem; padding: 0.5rem; height: 100vh; }
  .panel { padding: 0.5rem; min-height: 0; overflow: hidden; }
  .dial-container { width: 70%; }
  .power-value { font-size: clamp(0.8rem, 5vw, 2.5rem); }
  #systemInfo table { width: 80%; font-size: clamp(0.75rem, 1vw, 0.9rem); }
  #systemInfo {
    min-height: auto !important;
    overflow: visible !important;
  }
}