/*
 * Адаптивные таблицы: на узких экранах (<768px) строки таблиц с классом
 * `.table-cards` превращаются в карточки. Каждая ячейка <td> показывает свой
 * заголовок через атрибут data-label. На десктопе (>=768px) ничего не меняется.
 */
@media (max-width: 767.98px) {
  .table-cards thead {
    /* прячем шапку — её роль берут на себя data-label у ячеек */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .table-cards tbody tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    background: #fff;
  }

  .table-cards tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    text-align: right;
    width: auto !important;
    border: none;
    border-bottom: 1px solid #f1f1f1;
    padding: 0.5rem 0.25rem;
  }

  .table-cards tbody td:last-child {
    border-bottom: 0;
  }

  /* Подпись столбца слева, значение — справа */
  .table-cards tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #6c757d;
    text-align: left;
    margin-right: auto;
    white-space: nowrap;
  }

  /* Ячейки без data-label (например, колонка действий) — по центру/справа */
  .table-cards tbody td:not([data-label])::before {
    content: "";
  }

  /* Внутри table-responsive убираем горизонтальный скролл для карточек */
  .table-responsive:has(.table-cards) {
    overflow-x: visible;
  }
}