/* Раздел «Коммуналка» (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%;
  }
}

/* Фото табло в карточке счётчика (КЭ-3): миниатюры по месяцам */
.utilities-photos {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.utilities-photos__period {
  margin: 0;
  font-size: var(--font-size-secondary);
  font-weight: 600;
  color: var(--text-secondary);
}

.utilities-photos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.utilities-photos__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.utilities-photos__link {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface-subtle);
}

.utilities-photos__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}