/* styles-settings-recycle.css — блок «В переработку» на «Настройке потерь».
 *
 * Карточка повторяет вид «Таблицы потерь» (классы .loss-reason-*), поэтому здесь
 * только то, что отличает третью колонку: ширина сетки страницы и визуальный отрыв
 * от потерь — переработка не потеря, и глазом это должно читаться сразу.
 *
 * Отдельный файл, а не дописка в styles-settings-features.css: тот уже 783 строки
 * (выше 1.3× лимита) — новый код идёт в новый файл (ARCHITECTURE_LIMITS.md).
 */

/* Страница потерь занимает всю ширину: у общего контейнера настроек стоит
   width: min(1240px, 100%), и третья карточка упиралась в этот потолок, оставляя
   справа пустое поле. Переработке место у правого края (владелец, 13.08.2026). */
.page-shell.loss-settings-mode .loss-settings-shell {
  width: 100%;
}

/* Три колонки: расчёт простоя — таблица потерь — переработка. Растёт средняя (1fr),
   поэтому переработка прижата вправо. minmax'ы держат читаемую ширину инпутов;
   на узком экране сетка переносит карточки (правила ниже). */
.page-shell.loss-settings-mode .loss-settings-layout {
  grid-template-columns: minmax(300px, 360px) minmax(420px, 1fr) minmax(280px, 360px);
}

/* Отрыв от потерь: вертикальная линия слева + чуть больший зазор. Линия рисуется
   бордером самой карточки, чтобы не заводить лишний элемент-разделитель. */
.page-shell.loss-settings-mode .recycle-kinds-card {
  border-left: 2px solid rgba(128, 162, 208, 0.55);
  /* Зазор заметно больше межблочного (10px): пара «расчёт + потери» читается как
     потери, а переработка — как отдельная сущность, а не третий столбец потерь. */
  margin-left: 20px;
}

/* Тумблер раздела — сразу за названием блока, в одной строке с ним: человек
   читает «В переработку» и тут же видит, включена она или нет. Сам выключатель
   общий с настройками звука и приёмки (.notify-switch) — здесь только posadka. */
.recycle-kinds-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* margin у .notify-switch внутри заголовка не нужен: расстояние держит gap. */
.recycle-kinds-title .recycle-enable-switch {
  flex: 0 0 auto;
}

/* Две колонки: название вида — широкая, единица — узкая. Единица живёт у вида
   («крошка — кг», «жир — литр»), потому что рабочий выбирает вид, а не единицу. */
.recycle-kinds-table td:nth-child(1),
.recycle-kinds-table th:nth-child(1) {
  width: 62%;
}

.recycle-kinds-table td:nth-child(2),
.recycle-kinds-table th:nth-child(2) {
  width: 38%;
}

.recycle-unit-input {
  width: 100%;
  min-height: 28px;
  background: #cfd6e0;
  color: #1b3557;
}

@media (max-width: 1500px) {
  /* Втроём в ряд уже не помещаются: переработка уходит под таблицу потерь,
     расчёт остаётся слева. Линию отрыва в этом режиме заменяет верхняя. */
  .page-shell.loss-settings-mode .loss-settings-layout {
    grid-template-columns: minmax(300px, 360px) minmax(420px, 1fr);
  }
  .page-shell.loss-settings-mode .recycle-kinds-card {
    grid-column: 2;
    border-left: 0;
    border-top: 2px solid rgba(128, 162, 208, 0.55);
    margin-left: 0;
  }
}

@media (max-width: 1000px) {
  .page-shell.loss-settings-mode .loss-settings-layout {
    grid-template-columns: 1fr;
  }
  .page-shell.loss-settings-mode .recycle-kinds-card {
    grid-column: 1;
  }
}