:root {
    --color1: #d8e7f8;
    --color2: #1a1a2e;
    --color3: #00abe4;
    --color4: #38D2D2;
    --color5: #000;
    --color6: #14a73e98;
    --color7: #000;
    --color8: #dceaf8;
    --color9: rgba(0,255,255,0.2);
    --color10: rgba(0, 255, 255, 0.05);
    --color11: rgba(0, 0, 0, 0.2);
    --color12: rgba(25, 25, 45, 0.9);
    --color13: limegreen;
    --color14: white;
    --color15: indigo;
    --color16: dodgerblue;
    --color17: black;
    /*--color1: #0f0f1b;
    --color2: #1a1a2e;
    --color3: #0ff;
    --color4: #38D2D2;
    --color5: #000;
    --color6: #14a73e98;
    --color7: #fff;
    --color8: #0a0a1a;
    --color9: rgba(0,255,255,0.2);
    --color10: rgba(0, 255, 255, 0.05);
    --color11: rgba(0, 0, 0, 0.2);
    --color12: rgba(25, 25, 45, 0.9);
    --color13: limegreen;
    --color14: white;
    --color15: indigo;
    --color16: dodgerblue;
    --color17: black;*/
    /*--color4: #6200ee;
    --color5: #3700B3;*/
    /*limegreen
    white
    indigo
    dodgerblue
    black*/
    /*--background: #f0e9e3;
    --shadow: #03dac5;
    --border: hsl(197, 92%, 20%);
    --color4: #6200ee;
    --color5: #3700B3;*/
  }

/* 🎯 Global Layout Structure */
body, html {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', 'Roboto', sans-serif;
  background: var(--color1);
  color: var(--color7);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 🔝 Top Bar */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  background: linear-gradient(145deg, var(--color16), var(--color1));
  padding: 0 20px;
  box-shadow: 0 4px 6px var(--color9);
}

.topbar-left,
.topbar-mid,
.topbar-right {
  flex: 1;
  display: flex;
  align-items: center;
}

.topbar-left {
  justify-content: flex-start;
}

.topbar-mid {
  justify-content: center;
  font-size: 1.5rem;
  color: var(--color3);
  text-shadow: 0 0 10px var(--color3);
}

.topbar-right {
  justify-content: flex-end;
  gap: 10px;
}

/* 🧱 Main Container */
.main-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* 🧭 Sidebar (1/6 width, fixed, 3D style) */
.sidebar {
  flex: 0 0 16.666%;
  background: var(--color8);/*rgba(10, 20, 30, 0.9);*/
  backdrop-filter: blur(8px);
  box-shadow: inset -5px 0 10px var(--color9);
  border-right: 1px solid var(--color3);
  padding: 20px;
  position: sticky;
  top: 60px;
  height: calc(100vh - 120px); /* minus top and bottom bars */
  overflow-y: auto;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  margin-bottom: 20px;
}

.sidebar a {
  color: var(--color1); /*button text color*/
  font-weight: bold;
  text-shadow: 0 0 5px var(--color3);
  transition: 0.3s;
  text-decoration: none;
}

.sidebar a:hover {
  color: var(--color7);
  text-shadow: 0 0 10px var(--color3);
}

/* 🧾 Main Content (scrollable) */
.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 30px;
  max-height: calc(100vh - 120px); /* prevent overflow */
}

/* 🔻 Bottom Bar */
.bottombar {
  height: 60px;
  background: linear-gradient(145deg, var(--color8), var(--color1));
  color: var(--color3);
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--color3);
  box-shadow: 0 -4px 10px var(--color9);
}

/* 📊 SCADA Panel */
.scada-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.scada-tile {
  background: var(--color10);
  border: 1px solid var(--color3);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  font-size: 1.5rem;
  box-shadow: 0 0 15px var(--color9);
  text-shadow: 0 0 8px var(--color3);
}

/* 🛰️ Inverter Icon Grid */
.inverter-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.inverter-icon {
  width: 160px;
  height: 100px;
  background: var(--color1);
  border: 2px solid var(--color3);
  border-left: 8px solid var(--color13);
  color: var(--color3);
  padding: 10px;
  border-radius: 10px;
  box-shadow: inset 0 0 10px var(--color9);
  cursor: pointer;
  transition: 0.3s;
}

.inverter-icon:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px var(--color3);
}

.logo-section {
  text-align: center;
  margin-bottom: 30px;
}

.topbar {
  height: 120px;
}

.logo {
  border-radius: 25px;
  width: 100px;
  filter: drop-shadow(0 0 5px var(--color3));
}

.topbar-logo {
  border-radius: 25px;
  width: 100px;
  filter: drop-shadow(0 0 5px var(--color3));
  margin: 20px;
}



/* CSS */
.button-88 {
  display: flex;
  align-items: center;
  font-family: inherit;
  font-weight: 500;
  font-size: 16px;
  padding: 0.7em 1.4em 0.7em 1.1em;
  color: var(--color7);
  /*background: #ad5389;
  background: var(--color1);
  background: linear-gradient(0deg, rgba(20,167,62,1) 0%, rgba(102,247,113,1) 100%);*/
  background: linear-gradient(0deg, var(--color15) 0%, var(--color3) 70%);
  border: none;
  box-shadow: 0 0.7em 1.5em -0.5em var(--color6);
  letter-spacing: 0.05em;
  border-radius: 20em;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  margin: auto;
}

.button-88:hover {
  box-shadow: 0 0.3em 0.5em -0.5em var(--color6);
}

.button-88:active {
  box-shadow: 0 0.3em 1em -0.5em var(--color6);
}

.photo-strip {
  display: flex;
  justify-content: center;  /* Optional: centers the images horizontally */
  align-items: center;      /* Optional: aligns images vertically if heights differ */
  gap: 10px;                /* Adds spacing between images */
  flex-wrap: wrap;          /* Allows wrapping on small screens */
}

.photo-strip img{
  width: 100%;
  max-width: 48%;           /* Slightly less than 50% to allow for gap */
  height: auto;
  object-fit: cover;        /* Ensures images fill space nicely */
  border-radius: 8px;       /* Optional: rounded corners for style */
  box-shadow: 0 2px 8px var(--color11);  /* Optional: subtle shadow */
}

.inverterIcons {
  display: flex;
  justify-content: center;  /* Optional: centers the images horizontally */
  align-items: center;      /* Optional: aligns images vertically if heights differ */
  gap: 10px;                /* Adds spacing between images */
  flex-wrap: wrap;          /* Allows wrapping on small screens */
}

.inverter-logo {
  width: 100%;
  max-width: 48%;           /* Slightly less than 50% to allow for gap */
  height: auto;
  object-fit: cover;        /* Ensures images fill space nicely */
  border-radius: 8px;       /* Optional: rounded corners for style */
  box-shadow: 0 2px 8px var(--color11);  /* Optional: subtle shadow */
}

/* Login Page Styles */
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}

.login-form {
  background: var(--color1);
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 0 20px var(--color5);
  width: 300px;
  display: flex;
  flex-direction: column;
}

.login-form input {
  margin: 10px 0;
  padding: 12px;
  border: none;
  border-radius: 6px;
  background: var(--color10);
  color: var(--color2);
  font-size: 1rem;
  outline: none;
  box-shadow: inset 0 0 5px var(--color7);
}

.login-form input:focus {
  box-shadow: 0 0 10px var(--color3);
}

.login-form button {
  margin-top: 15px;
  padding: 12px;
  background: var(--color3);
  color: var(--color5);
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s ease;
}

.login-form button:hover {
  background: var(--color3);
  box-shadow: 0 0 10px var(--color3);
}

.login-message {
  margin-top: 10px;
  font-weight: bold;
  text-align: center;
}

/* Background image section */
.background-image {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  opacity: 0.3;
}

.zoom-controls {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.zoom-controls button {
  margin: 5px;
  padding: 10px 15px;
  background: var(--color3);
  border: none;
  border-radius: 16px;
  color: var(--color5);
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 0 10px var(--color3);
  transition: 0.3s;
}

.zoom-controls button:hover {
  background: var(--color3);
}

.zoom-controls {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.zoom-controls button {
  padding: 10px 18px;
  background: var(--color3);
  border: none;
  border-radius: 8px;
  color: var(--color5);
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 0 15px var(--color3);
  transition: 0.3s ease;
}

.zoom-controls button:hover {
  background: var(--color3);
  box-shadow: 0 0 25px var(--color3);
  transform: scale(1.05);
}

.slider {
  -webkit-appearance: none;
  margin-top: 20px;
  width: 30%;
  height: 15px;
  background: var(--color5);
  outline: none;
  border: 1px solid var(--color3);
  border-radius: 8px;
}

.slider:hover {
  background: var(--color5);
  box-shadow: 0 0 25px var(--color3);
  transform: scale(1.05);
}

/* for chrome/safari */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 40px;
  background: var(--color5);
  cursor: pointer;
  border: 2px solid var(--color3);
  border-radius: 4px;
}

/* for firefox */
.slider::-moz-range-thumb {
  width: 20px;
  height: 40px;
  background: var(--color5);
  cursor: pointer;
  border: 2px solid var(--color3);
  border-radius: 4px;
}

/* Responsive */
@media (max-width: 600px) {
  .login-form {
    width: 90%;
  }
}

.chart-wrapper {
  height: 80%;  
}

canvas {
  width: 100% !important;
  height: 100% !important;
}

select {
  appearance: none;
  @supports (appearance: base-select) {
    @media (hover: hover) {
      &,
      &::picker(select) {
        appearance: base-select;
      }
    }
  }
}

select {
  display: flex;
  justify-content: space-between;
  min-width: 300px;
  align-items: center;
  color: var(--color14);
  padding-block: 10px;
  padding-inline: 30px 40px;
  border-radius: 30px;
  border: 2px solid var(--color3);
  cursor: pointer;
  font-weight: 700;
  background: linear-gradient(0deg, var(--color1) 0%, var(--color3) 100%)/*navy*/
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23FFF' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E%0A")
    right 10px center / 20px no-repeat;
  /*background: linear-gradient(0deg, var(--color1) 0%, var(--color3) 100%);*/
  box-shadow: 0 0.7em 1.5em -0.5em var(--color6);
  @media (hover: hover) {
    @supports (appearance: base-select) {
      padding-inline: 20px;
      background-image: none;
      &::picker-icon {
        content: "";
        width: 20px;
        height: 20px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23FFF' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E%0A");
        transition: rotate 0.2s ease-out;
      }
      &:open::picker-icon {
        rotate: 180deg;
      }
      &::picker(select) {
        padding: 0;
        margin-top: 5px;
        border: 2px solid var(--color15);
        background: var(--color14);
        border-radius: 20px;
        font-weight: 400;

        opacity: 0;
        height: 0;
        overflow: clip;
        transition: height 0.2s ease-out, opacity 0.2s ease-out, overlay 0.2s,
          display 0.2s;

        transition-behavior: allow-discrete;
      }
      &:open::picker(select) {
        opacity: 1;
        height: calc-size(auto, size);
        overflow: auto;
        @starting-style {
          opacity: 0;
          height: 0;
        }
      }
      option {
        padding: 15px 20px;
        border-top: 1px solid var(--color15);
        cursor: pointer;
        transition-property: color, background;
        transition-duration: 0.2s;
        transition-timing-function: ease-out;
        &:where(:hover, :focus, :active) {
          background: var(--color16);
          color: var(--color14);
        }
        &:checked {
          background: var(--color3);
          color: var(--color17);
        }
        &::checkmark {
          display: none;
        }
        &:first-child {
          border: 0;
        }
      }
    }
  }
}

select:hover {
  box-shadow: 0 0.3em 0.5em -0.5em var(--color6);
}

/* CSS */
.button-91 {
  min-width: 170px;
  color: var(--color7);
  padding: 5px 15px;
  background-color: var(--color3);
  background-image: radial-gradient(93% 87% at 87% 89%, var(--color11) 0%, transparent 86.18%), radial-gradient(66% 66% at 26% 20%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%);
  box-shadow: inset -3px -3px 9px rgba(255, 255, 255, 0.25), inset 0px 3px 9px rgba(255, 255, 255, 0.3), inset 0px 1px 1px rgba(255, 255, 255, 0.6), inset 0px -8px 36px var(--color11), inset 0px 1px 5px rgba(255, 255, 255, 0.6), 2px 19px 31px var(--color11);
  border-radius: 14px;
  font-weight: bold;
  font-size: 16px;
  box-shadow: 0 0.7em 1.5em -0.5em var(--color6);
  border: 0;

  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;

  cursor: pointer;
}
.button-91:hover {
  box-shadow: 0 0.3em 0.5em -0.5em var(--color6);
}

main img{
  max-width: 700px;
}