/* Listas da empresa no celular: cada linha da tabela vira um cartão, com o
   rótulo da coluna ao lado do valor (data-label) e a ação sempre visível.
   Antes, "Resgatar", "Ver" e "Editar" ficavam fora da tela, à direita. */
@media (max-width: 575.98px) {
  .loy-table-stack thead {
    display: none;
  }

  .loy-table-stack,
  .loy-table-stack tbody,
  .loy-table-stack tr,
  .loy-table-stack td {
    display: block;
    width: 100%;
  }

  .loy-table-stack tr {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
  }

  /* Rótulo flutuando à esquerda; o conteúdo da célula (às vezes mais de
     uma linha, como nome + e-mail) empilha à direita. */
  .loy-table-stack td {
    padding: .15rem 0 !important;
    border: 0;
    text-align: right !important;
    overflow-wrap: anywhere;
  }

  .loy-table-stack td::before {
    content: attr(data-label);
    float: left;
    margin-right: 1rem;
    color: var(--bs-secondary-color);
    font-size: .875rem;
    text-align: left;
  }

  .loy-table-stack td::after {
    content: "";
    display: table;
    clear: both;
  }

  .loy-table-stack td:first-child {
    font-weight: 600;
    text-align: left !important;
  }

  .loy-table-stack td:first-child::before,
  .loy-table-stack td.loy-stack-action::before {
    content: none;
  }

  .loy-table-stack td.loy-stack-action {
    text-align: left !important;
    padding-top: .5rem !important;
  }
}