/*
  Таблицы на телефоне: строка превращается в карточку, заголовок столбца
  подписывает значение (подписи подставляет static/js/wf-stack.js).
  Горизонтальной прокрутки у такой таблицы нет — всё помещается в экран.
  Подключено и в приложение, и в админку.
*/
@media (max-width: 767px) {
  table.wf-stack,
  .wf-stack > tbody,
  .wf-stack > tbody > tr,
  .wf-stack > tbody > tr > td,
  .wf-stack > tbody > tr > th {
    display: block;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
  }
  .wf-stack > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .wf-stack > tbody > tr {
    padding: 0.6rem 0.875rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
  }
  .wf-stack > tbody > tr.empty-form,
  .wf-stack > tbody > tr.hidden {
    display: none;
  }
  .wf-stack > tbody > tr > td,
  .wf-stack > tbody > tr > th {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.2rem 0;
    border: 0;
    text-align: right;
    overflow-wrap: anywhere;
  }
  .wf-stack > tbody > tr > td:empty {
    display: none;
  }
  .wf-stack > tbody > tr > td[data-label]::before,
  .wf-stack > tbody > tr > th[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 45%;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--body-quiet-color, #64748b);
  }
  /* Первая ячейка («кто / что») — заголовок карточки, подписи не нужно. */
  .wf-stack > tbody > tr > th[scope="row"] {
    display: block;
    text-align: left;
    padding-bottom: 0.35rem;
    font-size: 0.95rem;
  }
  .wf-stack > tbody > tr > th[scope="row"]::before {
    display: none;
  }
  /* Ячейки с формами и длинным содержимым занимают всю ширину. */
  .wf-stack > tbody > tr > td > * {
    min-width: 0;
    max-width: 100%;
  }
  .wf-stack > tbody > tr > td > div {
    flex: 1 1 0;
  }
  .wf-stack input[type="text"],
  .wf-stack input[type="number"],
  .wf-stack select,
  .wf-stack textarea {
    max-width: 100%;
    box-sizing: border-box;
  }
}