/* ==========================================================================
   responsive-tables.css — tabelas viram cartões no celular
   --------------------------------------------------------------------------
   Opt-in por tabela: adicione a classe .table-cards no <table>. No desktop a
   tabela fica normal; abaixo de 768px cada <tr> vira um cartão empilhado.

   Requisitos na marcação (só no mobile eles são usados):
   - cada <td> de dado recebe data-label="Rótulo" (o mesmo texto do <th>);
   - a célula de ações recebe a classe .td-acoes (rótulo em cima, botões
     embaixo em linha que quebra, com toque maior) - sem precisar de wrapper;
   - células de "vazio" (colspan) NÃO recebem data-label (ficam centralizadas).
   ========================================================================== */

@media (max-width: 767.98px) {

  .table-cards thead {
    display: none;
  }

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

  /* Respiro nas laterais (pra os cartões não colarem na borda) e no topo (pra
     não colar no cabeçalho/busca da tabela). box-sizing:border-box do Bootstrap
     mantém o width:100% dentro do padding, sem estouro. */
  .table-cards {
    padding: 12px 14px 2px;
  }

  .table-cards tr {
    background: #fff;
    border: 1px solid #eef0f5;
    border-radius: 14px;
    padding: 6px 14px;
    margin-bottom: 14px;
    box-shadow: 0 2px 10px rgba(0, 32, 96, .05);
  }

  /* Cada célula: rótulo à esquerda, valor à direita */
  .table-cards td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    text-align: right;
    padding: 10px 0 !important;
    border: none !important;
    border-bottom: 1px solid #f4f6fa !important;
    white-space: normal;
  }

  .table-cards td:last-child {
    border-bottom: none !important;
  }

  .table-cards td::before {
    content: attr(data-label);
    font-weight: 600;
    text-transform: uppercase;
    font-size: .62rem;
    letter-spacing: .3px;
    color: #8a93a6;
    text-align: left;
    flex: 0 0 auto;
  }

  /* Célula de identidade (avatar + nome): vira o "título" do cartão, ocupando a
     linha inteira, alinhada à esquerda e sem rótulo. Marque o td com .td-head. */
  .table-cards td.td-head {
    text-align: left;
    padding-top: 4px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #eef0f5 !important;
  }

  .table-cards td.td-head::before {
    content: none;
  }

  /* Células sem data-label (ex.: estado vazio com colspan) ocupam a linha toda,
     centralizadas e sem rótulo. */
  .table-cards td:not([data-label]):not(.td-head) {
    justify-content: center;
    text-align: center;
  }

  .table-cards td:not([data-label])::before {
    content: none;
  }

  /* Textos internos podem quebrar/alinhar à direita sem o padding-left original */
  .table-cards td .ps-2 {
    padding-left: 0 !important;
  }

  /* Coluna de ações: rótulo ocupa a linha inteira; os botões vêm abaixo, em
     linha que quebra, com alvo de toque maior. Sem wrapper: o próprio td é o
     container flex (herdado da regra base) e o ::before "empurra" via 100%. */
  .table-cards td.td-acoes {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    text-align: left;
  }

  .table-cards td.td-acoes::before {
    flex: 0 0 100%;
    margin-bottom: 2px;
  }

  .table-cards td.td-acoes .btn {
    margin: 0 !important;
    padding: .5rem .65rem !important;
    font-size: .85rem !important;
    min-width: 42px;
  }

  /* Se a célula de ações não tem nenhum botão (ex.: pendência que não é de
     aprovação no Dashboard), some com ela pra não sobrar um rótulo "Ações" solto. */
  .table-cards td.td-acoes:not(:has(.btn)) {
    display: none;
  }

  /* Célula "rica" com vários elementos (ex.: Solicitante = nome + email +
     badge): rótulo em cima e o conteúdo empilhado embaixo, em coluna, alinhado à
     esquerda - senão os elementos ficam lado a lado espremidos e vazam do card. */
  .table-cards td.td-stack {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 2px;
  }

  .table-cards td.td-stack::before {
    margin-bottom: 4px;
  }

  .table-cards td.td-stack p,
  .table-cards td.td-stack span {
    text-align: left;
    max-width: 100%;
    word-break: break-word;
  }

  /* Célula de faixa de meses (Pagamento): rótulo em cima, a faixa embaixo,
     ocupando a largura toda e quebrando as pílulas em várias linhas. */
  .table-cards td.td-strip {
    flex-wrap: wrap;
    justify-content: flex-start;
    text-align: left;
  }

  .table-cards td.td-strip::before {
    flex: 0 0 100%;
    margin-bottom: 6px;
  }

  .table-cards td.td-strip .pg-strip {
    flex-wrap: wrap;
  }

  /* Imagens/thumbs dentro do cartão não esticam demais */
  .table-cards td img {
    max-width: 64px;
    height: auto;
  }
}