/* ===== ОСНОВНОЙ СТИЛЬ (КАК У ТЕБЯ И БЫЛ) ===== */
body {
  font-family: Arial, sans-serif;
  background-color: #121212;
  color: #eee;
  margin: 0;
  padding: 10px;
}

header {
  text-align: center;
  margin-bottom: 15px;
}

.status p,
.status label {
  margin: 5px 0;
}

.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 5px 0;
  gap: 8px;       /* расстояние между текстом и полями */
  flex-wrap: wrap; /* на маленьких экранах текст переходит на новую строку, input остаётся рядом */
}

.status-row label {
  margin: 0;
  /* flex: 1 1 auto; /* занимает доступное место */
  flex: 0 0 auto; /* текст не растягивается */
  /* min-width: 120px; /* текст не ужимается слишком сильно */
}

.status-row input {
  flex: 0 0 70px;
  max-width: 35%;      /* максимум 30% от ширины контейнера */
  box-sizing: border-box;
}



.plants {
  display: grid;
  gap: 15px;
}

.plant {
  background: #1f1f1f;
  padding: 15px;
  border-radius: 10px;
}

.plant button {
  margin-top: 10px;
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background-color: #4caf50;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

.plant button:active {
  background-color: #388e3c;
}

/* ===== КАМЕРА ===== */
.camera {
  margin-top: 20px;
}

.camera img {
  width: 100%;
  border-radius: 10px;
  background: #333;
}

/* ===== МОДАЛЬНОЕ ОКНО (В ТОМ ЖЕ СТИЛЕ) ===== */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.75);
  justify-content: center;
  align-items: center;
  z-index: 1000;
  overflow: hidden; /* чтоб модалка не вылазила за пределы экрана */
}

.modal-content {
  background: #1f1f1f;
  padding: 20px;
  border-radius: 10px;
  width: 90%;
  max-width: 320px;
  text-align: center;
  max-height: calc(100vh - 40px); /* чтоб модалка не вылазила за пределы экрана */
  overflow-y: auto;               /* чтоб модалка не вылазила за пределы экрана */
  box-sizing: border-box;         /* чтоб модалка не вылазила за пределы экрана */
}

.modal-content p {
  margin-bottom: 20px;
  font-size: 16px;
}

.modal-buttons {
  display: flex;
  gap: 10px;
  position: sticky;        /* чтоб модалка не вылазила за пределы экрана */
  bottom: 0;               /* чтоб модалка не вылазила за пределы экрана */
  background: #1f1f1f;     /* чтоб модалка не вылазила за пределы экрана */
  padding-top: 10px;       /* чтоб модалка не вылазила за пределы экрана */
}

/* Универсальные кнопки в модалках */
.modal-buttons button {
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  color: #fff;
}
/* зеленая кнопка сохранения , ОК */
.modal-buttons button.save {
  background-color: #4caf50;
}

.modal-buttons button.save:active {
  background-color: #388e3c;
}
/* Серая кнопка отмена  ,  закрыть*/
.modal-buttons button.cancel {
  background-color: #555  ! important;
  color: #fff ! important;
} 

.modal-buttons button.cancel:active {
  background-color: #666 ! important;
}

/* Подсвека кнопок */
.plant button.active {
  background-color: #2bbbad; /* зелёно-голубой */
  box-shadow: 0 0 12px rgba(43, 187, 173, 0.7);
}

.plant button.active:active {
  background-color: #1fa89a;
}

/* Верхние кнопки */

/*.top-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 10px;
}               */ /* так было */

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.app-title {
  font-size: 26px; /* размер шрифта заголовка */
  font-weight: 600;
  color: #8fdcff;
  margin: 0;
}

.top-actions {
  display: flex;
  gap: 10px;
}

.top-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #1f2a33;
  color: #8fdcff;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(0, 200, 255, 0.3);
}

.top-btn:active {
  transform: scale(0.92);
}

.top-btn.danger {
  background: #331f1f;
  color: #ff6b6b;
  box-shadow: 0 0 8px rgba(255, 80, 80, 0.4);
}

.top-btn.danger:active {
  transform: scale(0.9);
}


/* ===== Расписание ===== */

.schedule {
  max-width: 400px;
}

.schedule-section {
  margin-bottom: 15px;
  padding: 10px;
  background: #1f1f1f;
  border-radius: 10px;
}

.section-header {
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-body {
  margin-top: 10px;
}

.section-body.disabled {
  opacity: 0.4;
  pointer-events: none;
}

#timeList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.time-row {
  display: flex;
  gap: 10px;
}

.time-row button {
  background: #c62828;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 8px;
}

.add-btn {
  margin-top: 10px;
  width: 100%;
  background: #4caf50;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px;
}

/* ===== Инпуты в расписании (мобилки) ===== */

.schedule input[type="time"],
.schedule input[type="number"] {
  background-color: #2a2a2a;
  color: #ffffff;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 16px; /* важно для iOS, чтобы не зумило */
}

/* Универсальные инпуты (для модалок и форм) */
.modal-content input {
  background-color: #2a2a2a;
  color: #ffffff;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 16px; /* важно для мобилок */
}


.schedule input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  }

/* мигание в поле интервал на модальном окне расписание */
.input-flash {
  animation: flash 1.1s ease;
}

@keyframes flash {
  0%   { background-color: #444444; }  /* светло-серый */
  50%  { background-color: #1f1f1f; } /* твой фон модалки */
  100% { background-color: #444444; }
}

/* стили для toast-уведомлений */
#toastContainer {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 3000;
}

.toast {
  min-width: 220px;
  padding: 12px 16px;
  border-radius: 10px;
  background: #2f2f2f;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateY(-10px);
  transition: 0.25s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.warning {
  background: #8b5a00;
}

.toast.error {
  background: #8b0000;
}

.toast.success {
  background: #1e6b2c;
}