/* Основные стили для body */
body {
  font-family: Arial, sans-serif; /* Шрифт */
  max-width: 400px; /* Максимальная ширина */
  padding: 0px; /* Внутренние отступы */
  background: #858484;  /* Тёмный фон всей страницы #1a1a1a*/
  margin: 0; /* Убираем внешние отступы */
}

/* Стили для панелей с неоновым эффектом */
.panel {
  background: #798bbe; /* Темный цвет фона */
  padding: 25px; /* Внутренние отступы */
  margin-bottom: 40px; /* Большой отступ снизу */ 
  border-radius: 10px; /* Скругление углов */
  /*box-shadow: none; /* Это переопределит любые предыдущие тени */
  /*box-shadow: 0 0 20px 5px rgba(0, 150, 255, 0.6); /* Синяя неоновая тень */
  box-shadow: 0 0 20px 5px rgba(255, 200, 0, 0.6); /* Желтая неоновая тень */
  
}

/* Специфичные тени для разных панелей */
#temperaturePanel {
  box-shadow: 0 0 20px 5px rgba(58, 56, 165, 0.918); /* Розовая неоновая тень */
}

#ledPanel {
  box-shadow: 0 0 20px 5px rgba(0, 255, 100, 0.6); /* Зеленая неоновая тень */
}

/* Основные стили для панели графика */
/*#chartPanel {
  position: relative; /* Необходимо для z-index */
  /*z-index: 1; /* Поднимаем над другими элементами */
  /*box-shadow: 0 0 20px 5px rgba(255, 200, 0, 0.6) !important; /* Желтая тень */
 /* background: #2c3e50 !important; /* Цвет фона */
 /* padding: 25px !important; /* Отступы */
/*}

/* Контейнер для графика */
.chart-container {
  width: 100%;
  height: 300px;
  position: relative;
}
/* Стиль для контейнера графика с тенью */
#chartPanelContainer {
  box-shadow: 0 0 20px 5px rgba(255, 200, 0, 0.6); /* Желтая неоновая тень */
  position: relative; /* Для позиционирования */
  z-index: 1; /* Поднятие над другими элементами */
  background: #6e6e6e; /* Цвет фона */
  padding: 25px; /* Внутренние отступы */
  border-radius: 10px; /* Скругленные углы */
}

/* Внутренний контейнер для графика */
#chartInnerContainer {
  width: 100%; /* Полная ширина */
  height: 300px; /* Фиксированная высота */
  position: relative; /* Для позиционирования */
}
/* Гарантированные стили для панели графика */
#chartPanel {
  position: relative !important;
  z-index: 1000 !important;
  background: #2c3e50 !important;
  padding: 25px !important;
  border-radius: 10px !important;
}

/* Стили для canvas */
#tempChart {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}


/* Обертка для графика */
.chart-wrapper {
  width: 100%; /* Полная ширина */
  height: 300px; /* Фиксированная высота */
  position: relative; /* Для внутреннего позиционирования */
}



/* Стили для отображения температуры */
.temp-value {
  font-size: 2.5em; /* Размер шрифта */
  color: #ecf0f1; /* Светлый текст */
  margin: 10px 0; /* Внешние отступы */
}

/* Базовые стили для кнопки */
.led-btn {
  padding: 10px 20px; /* Внутренние отступы */
  border-radius: 40px; /* Скругление углов */
  cursor: pointer; /* Курсор-указатель */
  font-weight: bold; /* Жирный шрифт */
  transition: all 0.3s; /* Плавные переходы */
}

/* Стили для включенного состояния */
.led-on {
  background: #f4c136; /* Красный фон */
  color: white; /* Белый текст */
  margin: 10px 0; /* Внешние отступы */
}

/* Стили для выключенного состояния */
.led-off {
  background: #4CAF50; /* Зеленый фон */
  color: white; /* Белый текст */
  margin: 10px 0; /* Внешние отступы */
}

/* Стили для текста статуса */
.led-status {
  margin-top: 10px; /* Отступ сверху */
  font-weight: bold; /* Жирный шрифт */
  color: #ecf0f1; /* Светлый текст */
}

/* Индикатор состояния */
.led-indicator {
  display: inline-block; /* Строчно-блочный элемент */
  width: 16px; /* Ширина */
  height: 16px; /* Высота */
  border-radius: 5%; /* Скругление углов */
  margin-right: 8px; /* Отступ справа */
  vertical-align: middle; /* Выравнивание по вертикали */
}

/* Индикатор включенного состояния */
.led-on-indicator {
  background-color: #4CAF50; /* Зеленый фон */
  box-shadow: 0 0 8px #4CAF50; /* Зеленое свечение */
}

/* Индикатор выключенного состояния */
.led-off-indicator {
  background-color: #F44336; /* Красный фон */
  box-shadow: 0 0 8px #F44336; /* Красное свечение */
}

/* Контейнер для двухколоночного layout */
.dashboard {
  display: flex; /* Флекс-контейнер */
  gap: 50px; /* Расстояние между колонками */
  max-width: none; /* Без ограничения ширины */
  margin: 0 auto; /* Центрирование */
  padding: 0 50px; /* Боковые отступы */
}

/* Левая колонка (панели) */
.panels-column {
  flex: 1; /* Гибкая ширина */
  min-width: 400px; /* Минимальная ширина */
}

/* Правая колонка (график) */
.chart-column {
  flex: 1; /* Гибкая ширина */
  min-width: 800px; /* Минимальная ширина */
}

/* Стили для графика */
#tempChart {
  width: 100% !important; /* Полная ширина */
  height: 300px !important; /* Фиксированная высота */
  background: #7a7a7a69; /* Темный фон */
  border-radius: 8px; /* Скругление углов */
  padding: 20px; /* Внутренние отступы */
  /*filter: invert(90%) hue-rotate(180deg) brightness(1.2); /* Инвертирует цвета */
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
  .dashboard {
    flex-direction: column; /* Колонки вертикально */
  }
  
  .panel {
    margin-bottom: 30px; /* Увеличенный отступ */
  }
}