/* Шаг «Документы» мастера оборудования — правки тестирования 19-09
   (#70819351, пункты 3, 15–22). Подключается после app.css / components.css.
   Цвета — только токенами (обе темы наследуют их из tokens/colors.css). */

/* ── п. 21: подсказка «i» сразу за названием ─────────────────────────────
   Иконка стоит ВНУТРИ заголовка строки (inline), а не третьей колонкой
   грида: у длинного названия грид отдавал колонке заголовка всю ширину и
   уносил иконку к правому краю карточки. Заголовок остаётся тем же гридом
   (маркер + текст); третья колонка теперь пуста и места не занимает. */
.doc-check-item--machinery .doc-check-item__heading {
  grid-template-columns: auto minmax(0, 1fr);
}
.doc-check-item--machinery .doc-check-item__hint {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 4px;
}
.doc-check-item--machinery .doc-check-item__hint .ui-hint {
  width: 20px;
  height: 20px;
  margin: -2px 0;
}
/* Ретест п. 21: иконка не уезжает на СВОЮ строку. Инлайн-иконка в конце
   длинного названия переносилась одна, без текста («Договор лизинга /
   аренды оборудования», «Документы о ремонте и техобслуживании»). Здесь
   неразрывен только хвост — последнее слово со звёздочкой и иконкой:
   заголовок целиком запрещать переносить нельзя, на 320 px он вылез бы
   за карточку. */
.doc-check-item--machinery .doc-check-item__title-tail {
  white-space: nowrap;
}

/* ── п. 15–17 + ретест п. 3: над списком остался ОДИН счётчик ────────────
   Словесная легенда «* — обязательные документы» снята (ретест #70819351,
   п. 3): красная звёздочка у названия — та же, что в полях формы, и второй
   раз объяснять её незачем. У `.row-sb` единственный ребёнок прижался бы
   к левому краю, а счётчик стоит справа — на одной вертикали с кнопкой
   «Назад» шапки шага. */
.docs-list-head {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 12px;
  min-width: 0;
}

/* ── п. 20: карточка файла — размер под названием, крестик справа ────────
   База `.doc-file-chip` (components.css) — грид «имя | крестик» из двух
   колонок; строка оборудования печатала ещё и размер, и третий ребёнок
   переносился на вторую строку грида — крестик оказывался под именем. */
.doc-check-item--machinery .doc-file-chip {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 6px 5px 6px 10px;
}
.doc-file-chip__meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.doc-file-chip__meta .doc-file-chip__size {
  color: var(--text-muted);
  line-height: 1.2;
}

/* ── ретест п. 22: просмотр снятого кадра перед загрузкой ────────────────
   Модалка `PhotoCapture.pickWithReview`: кадры сеткой, под ними — почему
   ещё можно переснять. Сетка авто-заполняемая: один кадр занимает всю
   ширину, несколько встают в ряды по 160 px и не растягиваются выше
   экрана телефона. */
.photo-review__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 10px;
}
.photo-review__item {
  margin: 0;
  min-width: 0;
}
.photo-review__img {
  display: block;
  width: 100%;
  max-height: 46vh;
  object-fit: contain;
  border: 1px solid var(--brl);
  border-radius: var(--r2);
  background: var(--surface-sunken);
}
.photo-review__name {
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.photo-review__note { margin-top: 10px; }

/* ── п. 3: ничего не выходит за границы карточки ─────────────────────────
   Колонка действий строки машин ограничена 260 px (app.css) под прежние две
   кнопки С ПОДПИСЬЮ под ними. Подписи больше нет (п. 18), а кнопок у строки
   фотографий снова две («Загрузить» и «Снять на телефон», ретест п. 22) —
   под 260 px они ломались бы на две строки там, где место есть. Ширину
   задаёт содержимое (колонка действий грида карточки — см. ниже ретест-2:
   `auto` вместо `max-content`, чтобы в тесной карточке колонка ужималась,
   а не выходила за её границу). */
.doc-check-item--machinery .doc-check-item__actions {
  max-width: none;
  align-items: flex-start;
}
.doc-check-item--machinery .doc-check-item__title { overflow-wrap: anywhere; }
.doc-check-item--machinery .doc-upload-formats { overflow-wrap: anywhere; }

/* ── ретест-2 п. 22: кнопки строки остаются ВНУТРИ карточки ──────────────
   Замер 21-09 на живом мастере: карточка перечня на 1280 px — 803 px, а
   грид `.doc-check-item` (app.css) требовал 250 + 260 + 258 (две кнопки
   в строку) + 40 (зазоры) + 32 (поля) = 840 px. Жёсткие минимумы соседних
   колонок ужиматься не умеют, колонка действий — `max-content` и тем
   более: грид просто ВЫХОДИЛ за карточку, и «Снять на телефон» уезжала за
   правую границу на 21 px, а на 1121 px — на 182 px (там же вылезала и
   одинокая «Загрузить» остальных строк). Ниже 1121 px дефекта не было:
   грид уже перестроен медиазапросами app.css в две колонки и в одну.
   Лечение — сделать ужимаемыми все три колонки трёхколоночной полосы:
   • `auto` у действий = `minmax(min-content, max-content)`: есть место —
     кнопки стоят в строку, нет — колонка садится по самой широкой кнопке,
     а flex переносит вторую кнопку на следующую строку (перенос, а не
     переполнение);
   • 200 px заголовку и ноль колонке файлов — арифметика узкого края
     полосы: карточка на 1121 px = 659 px, и за вычетом полей, зазоров и
     258 px действий заголовку с файлами остаётся 329 px. Имя файла в чипе
     и так режется многоточием (`.doc-file-chip__name`), поэтому ужимание
     колонки файлов ничего не рвёт. */
@media (min-width: 1121px) {
  .doc-check-item--machinery {
    grid-template-columns: minmax(200px, .9fr) minmax(0, 1.1fr) auto;
  }
}

@media (max-width: 760px) {
  /* Узкие экраны: оба действия строки фотографий — во всю ширину колонки,
     как остальные кнопки (`.doc-check-item__actions > .btn { width: 100% }`
     в app.css), одно под другим. */
  .doc-check-item--machinery .doc-check-item__actions > .btn { width: 100%; }
}