/* Reset stylów */
* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html {
   font-size: 62.5%;
   scroll-behavior: smooth;
   height: 100%; /* Upewnij się, że html wypełnia całą wysokość */
}

body {
   font-family: 'Montserrat', sans-serif;
   background-color: #181d23;
   color: white;
   height: 300; /* Dostosowanie do pełnej wysokości */
   overflow: auto; /* Pozwala na przewijanie zawartości w pionie */
   padding: 0px;
}

.text-center {
   text-align: left !important;  /* Wymusza nadpisanie innych ustawień */
   margin-left: 20px; /* Dodatkowy margines z lewej */
}

h1.text-center {
   color: black;
   font-size: 4rem;
   margin-top: 20px;
}
.container {
   overflow: hidden;
   max-width: 100%; /* Zapobiega nadmiernemu rozciąganiu */
}
.panel-right {
   margin-top: 0px; /* Dopasowanie do wysokości paska */
   padding-left: 20px;
   background-color: #fff;
   overflow-y: auto;
   height: calc(100vh - 60px); /* Pełna wysokość minus pasek nawigacyjny */
}
.panel {
   /* Uniwersalne style panelu */
   padding: 20px;
   border: 1px solid #ddd;
   border-radius: 4px;
   background-color: #f9f9f9;
}
.panel-title {
    /* Stylowanie nagłówków w panelach */
    text-align: center;
    font-size: 24px;
    color: #333;
}
.panel-left {
   width: 100%; /* Cała szerokość strony */
   background-color: #4B5769;
   display: flex;
   justify-content: flex-start; /* Ustawia zawartość w poziomie do lewej */
   align-items: center; /* Wyrównanie w pionie */
   position: fixed; /* Pasek pozostaje na górze */
   top: 0;
   left: 0;
   z-index: 100;
   padding: 10px 20px; /* Dodano odstęp 20 px z lewej */
   box-sizing: border-box;
   height: 60px; /* Wysokość paska */
   gap: 30px;
}

.menu {
   display: flex;
   flex-direction: column; /* Ikony w kolumnie */
   gap: 30px; /* Odstępy między ikonami */
   justify-content: flex-start; /* Ustawia ikony do lewej */
   align-items: flex-start; /* Wyrównanie ikon do lewej */
   margin: 0;
   padding: 0;
}

.menu-item {
   width: 40px;
   height: 40px;
   display: flex;
   justify-content: center; /* Ikona na środku w obrębie przycisku */
   align-items: center;
   border-radius: 10%;
   background-color: rgba(255, 255, 255, 0.1);
   color: white;
   font-size: 1.8rem;
   text-decoration: none;
   transition: background-color 0.3s;
   
}

.menu-item:hover,
.menu-item.active {
   background-color: rgba(255, 255, 255, 0.2);
}

.menu i {
   margin-left: 0; /* Zapewnia brak dodatkowego marginesu */
}


.filter-container {
   gap: 1rem;
}

.filter-container input {
   padding: 0.5rem;
   font-size: 1.4rem;
   border-radius: 5px;
   border: 1px solid #ddd;
}

.filter-container button {
   padding: 0.5rem 1rem;
   font-size: 1.4rem;
   border: none;
   border-radius: 5px;
   background-color: #007bff;
   color: white;
   cursor: pointer;
}

.filter-container button:hover {
   background-color: #0056b3;
}

/* Responsywność */
@media (max-width: 768px) {
   .panel {
      flex-direction: column;
   }

   .panel-left {
      padding-left: 30px;
   }

   .menu {
      flex-direction: row;
      gap: 10px;
      justify-content: center;
      align-items: center;
   }

   .menu-item {
      font-size: 1.6rem;
      width: 35px;
      height: 35px;
   }

   .panel-right {
      margin-left: 0;
      width: 100%;
      margin-top: 80px;
   }

   
   #temperatureChart {
      height: 300px; /* Niższa wysokość na mniejszych ekranach */
  }
}

@media (max-width: 480px) {
   
   .menu-item {
      font-size: 1.4rem;
      width: 25px;
      height: 25px;
   }
   #temperatureChart {
      height: 250px; /* Jeszcze niższa na bardzo małych ekranach */
  }
}
#temperatureChart {
   width: 100%; /* Wypełnia szerokość kontenera */
   height: 400px; /* Stała wysokość wykresu */
   overflow: hidden; /* Zapobiega przewijaniu nadmiaru */
   margin: 20px auto; /* Wyśrodkowanie wykresu */
   background-color: #fff; /* Ciemnoszare tło */
   border-radius: 8px; /* Zaokrąglenie narożników */
}

/* Styl wykresu */
#chart {
   width: 100%;
   height: calc(80vh - 150px);
   overflow: auto;
   background-color: #fff; /* Ciemnoszare tło dla wykresu */
   border-radius: 10px;
   margin-top: 20px;
   padding: 20px;
}

/* Styl temperatur */
.temperature-container {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
   justify-content: flex-start;
   align-items: flex-start;
   padding: 12px;
}

.temperature-box {
   background-color: inherit;
   color: inherit;
   border: none;
   padding: 20px;
   border-radius: 15px;
   text-align: center;
   width: 150px;
   height: 150px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   box-shadow: 0 0 10px rgba(0, 0, 0, 1);
}

.temperature-box .temperature-text {
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 90px;
   font-weight: bold;
   color: inherit;
}

.temperature-box .temperature-text span {
   margin-right: 10px;
}

.temperature-box .label {
   font-size: 44px;
   margin-top: 10px;
   color: inherit;
}

/* Relay */
.relay-container {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
   justify-content: flex-start;
   align-items: flex-start;
   padding: 12px;
}

.relay-box {
   background-color: inherit;
   color: inherit;
   border: none;
   padding: 20px;
   border-radius: 15px;
   text-align: center;
   width: 150px;
   height: 150px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   box-shadow: 0 0 10px rgba(0, 0, 0, 1);
}

.relay-box .label {
   font-size: 35px;
   margin-top: 10px;
   color: inherit;
}

.relay-box.on {
   background-color: rgb(0, 128, 0); /* Zielone tło, gdy włączony */
   color: white;
}

.relay-box.off {
   background-color: rgb(190, 190, 190); /* Szare tło, gdy wyłączony */
   color: white;
}

.relay-box i.fa-power-off {
   font-size: 60px; /* Ustawiamy odpowiedni rozmiar ikony */
}

/* Ikona włączona - kolor zielony */
.relay-box.on i.fa-power-off {
   color: rgb(0, 255, 0); 
}

/* Ikona wyłączona - kolor szary */
.relay-box.off i.fa-power-off {
   color: rgb(255, 0, 0); 
   
}

/* Ikony */
.fa-solid.fa-temperature-arrow-up,
.fa-solid.fa-temperature-arrow-down,
.fa-solid.fa-temperature-empty {
   font-size: 70px;
   color: #6a0dad;
}

/* Styl tabeli */
.table-responsive {
   margin-top: 20px;
}

table {
   width: 100%;
   border-collapse: collapse;
   color: white;
   padding: 12px;
}

th, td {
   padding: 12px;
   text-align: center;
}

th {
   background-color: #333;
}

tr:nth-child(even) {
   background-color: #444;
}

tr:nth-child(odd) {
   background-color: #555;
}

table td {
   color: #fff;
}