/* Раздел «Коммуналка» (plans/utilities): сводка плитками, фильтры в строку,
   ввод показаний в таблице, исправление и закрытие — раскрывающейся формой */

/* Экраны с обычной прокруткой («Показания», «Начисления») — стопка
   .stack: поля даёт .app-scroll, отступы между блоками — .stack; у
   .registry-bar поля для таблицы во весь экран, здесь не нужны */
.utilities-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.registry-bar .utilities-metrics + .utilities-filter {
  margin-top: var(--space-4);
}

.utilities-filter__field {
  flex: 1 1 220px;
  min-width: 0;
}

.utilities-form {
  max-width: 1080px;
}

.utilities-reading-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.utilities-reading-input .field__input {
  width: 160px;
}

.utilities-reading-input__reset {
  font-size: var(--font-size-secondary);
  color: var(--text-secondary);
}

.utilities-warning {
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
  color: var(--warning);
}

.utilities-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.utilities-actions__form {
  display: inline-flex;
}

.utilities-correct summary {
  list-style: none;
  cursor: pointer;
}

.utilities-correct summary::-webkit-details-marker {
  display: none;
}

.utilities-correct__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
  min-width: 220px;
}

.utilities-reading--old td {
  color: var(--text-muted);
}

@media (max-width: 767px) {
  .utilities-reading-input .field__input {
    width: 100%;
  }
}