/* Заявки арендаторов (Р-37; CRM v2): реестр и карточка заявки в CRM.
 * Только токены tokens.css, поверх panel/kv-list из ui.css. Раздел
 * кабинета — в portal_requests.css (стили кабинета — в файлах portal-*). */

/* --- Реестр: суть заявки — в одну строку с многоточием (полная — в title) --- */

.service-request-title {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .table.table--cards .service-request-title {
    max-width: none;
    white-space: normal;
  }
}

/* --- Карточка заявки --- */

.service-request-text {
  padding: var(--space-3) var(--space-5) var(--space-4);
  border-top: 1px solid var(--border-soft);
}

.service-request-text p {
  margin: 0 0 var(--space-1-5);
}

.service-request-text p:last-child {
  margin-bottom: 0;
}

.service-request-cost {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.service-request-cost__form {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
  flex-wrap: wrap;
}

.service-request-cost__form .field {
  width: 200px;
}

/* Расчёт строки: «подпись — сумма», суммы вправо */
.service-request-calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: var(--space-1) var(--space-4);
  max-width: 360px;
  margin: 0;
}

.service-request-calc dt {
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-base);
  color: var(--text-secondary);
}

.service-request-calc dd {
  margin: 0;
  text-align: right;
}

.service-request-cost__formula,
.service-request-cost__place {
  margin: 0;
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
  color: var(--text-secondary);
}

.service-request-cost__formula {
  font-size: var(--font-size-hint);
  line-height: var(--line-height-hint);
}

.service-request-cost__history {
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-soft);
  font-size: var(--font-size-hint);
  line-height: var(--line-height-hint);
  color: var(--text-muted);
}

.service-request-cost__history-title {
  margin-bottom: var(--space-1);
  font-weight: 600;
}

@media (max-width: 767px) {
  .service-request-text {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .service-request-cost__form .field {
    flex: 1 1 100%;
    width: auto;
  }

  .service-request-cost__form .btn,
  .service-request-cost > form .btn {
    flex: 1 1 100%;
    width: 100%;
  }

  .service-request-calc {
    max-width: none;
  }
}

/* Строка по каталогу (Ф1г): «Пропуск · 3 шт. × 500,00 ₽» над расчётом */
.service-request-cost__service {
  margin: 0;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--text);
}

/* Услуга из каталога (Ф1г) — шире прочих полей: в опции название и цена */
.service-request-cost__form .service-request-cost__item {
  width: 320px;
}

@media (max-width: 767px) {
  .service-request-cost__form .service-request-cost__item {
    flex: 1 1 100%;
    width: auto;
  }
}

/* --- Заявка v2 (КЭ-2): исполнитель, срочность, система и место, лента --- */

.service-request-ops {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.service-request-ops__line {
  margin: 0;
}

.service-request-ops__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

.service-request-ops__grow {
  flex: 1 1 240px;
}

.service-request-ops__comment {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.service-request-event__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.service-request-event__text {
  margin: var(--space-1) 0 0;
  white-space: pre-line;
}

.service-request-due--late {
  color: var(--danger);
  font-weight: 600;
}

.service-requests-filter {
  flex-wrap: wrap;
}

/* --- Фото заявки (КЭ-3): миниатюры — тот же JPEG CSS-размером --- */

.service-request-photos {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.service-request-photos__stage {
  margin: 0;
  font-size: var(--font-size-secondary);
  font-weight: 600;
  color: var(--text-secondary);
}

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

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

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

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

.service-request-photos__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
}