/* ==========================================================================
   Responsive tables — table → cards em mobile (≤768px)

   Opt-in: adicione a classe "responsive-cards" no .table-wrap e
   data-label="Coluna" em cada <td> do tbody. O <thead> some em mobile
   e cada linha vira um card com label/valor.

   <div class="table-wrap responsive-cards">
       <table class="table">
           <thead><tr><th>Código</th><th>Status</th></tr></thead>
           <tbody>
               <tr>
                   <td data-label="Código">LOTE-001</td>
                   <td data-label="Status">Em conferência</td>
               </tr>
           </tbody>
       </table>
   </div>

   A primeira <td> de cada linha vira o "título" do card (sem label,
   destaque visual). Use isso pra coluna principal (código, nome).

   Pages com regras específicas (ex.: progresso ocupar linha cheia)
   adicionam overrides no CSS per-page, ESCOPADOS pela classe pai.
   ========================================================================== */

@media (max-width: 768px) {
    /* Mata scroll horizontal no nível da página inteira em mobile */
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    .app-main,
    .app-content,
    .main-content,
    .content {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Mata scroll horizontal — cards devem caber no viewport */
    .table-wrap.responsive-cards {
        overflow-x: visible;
    }

    /* Some o cabeçalho */
    .table-wrap.responsive-cards > .table thead {
        display: none;
    }

    /* Tabela vira pilha de cards */
    .table-wrap.responsive-cards > .table,
    .table-wrap.responsive-cards > .table tbody,
    .table-wrap.responsive-cards > .table tr,
    .table-wrap.responsive-cards > .table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        max-width: 100%;
    }

    /* Cada <tr> vira card */
    .table-wrap.responsive-cards > .table tr {
        background: var(--input-bg);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        margin-bottom: 0.75rem;
        padding: 0.85rem 1rem;
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }
    .table-wrap.responsive-cards > .table tr.clickable:active {
        background: var(--bg-page);
    }

    /* Cada <td> vira linha "label : valor" */
    .table-wrap.responsive-cards > .table td {
        padding: 0.4rem 0;
        border: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        font-size: 0.95rem;
        flex-wrap: wrap;
        word-break: break-word;
    }
    .table-wrap.responsive-cards > .table td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.7rem;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        flex-shrink: 0;
    }

    /* Coluna principal (1ª td): vira título do card, sem label */
    .table-wrap.responsive-cards > .table td:first-child {
        border-bottom: 1px solid var(--border-light);
        padding-bottom: 0.5rem;
        margin-bottom: 0.4rem;
        font-size: 1rem;
        font-weight: 700;
        justify-content: flex-start;
    }
    .table-wrap.responsive-cards > .table td:first-child::before {
        display: none;
    }

    /* Reset de utilitários desktop que forçam largura/centro */
    .table-wrap.responsive-cards > .table td.w-80,
    .table-wrap.responsive-cards > .table td.w-100,
    .table-wrap.responsive-cards > .table td.w-120,
    .table-wrap.responsive-cards > .table td.text-center,
    .table-wrap.responsive-cards > .table td.text-right {
        text-align: left;
        width: 100%;
    }

    /* Linha de ações (botões editar/excluir) ocupa largura total ao final */
    .table-wrap.responsive-cards > .table td.actions,
    .table-wrap.responsive-cards > .table td:last-child:has(.btn) {
        flex: 1 1 100%;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border-light);
        justify-content: flex-end;
    }
}