/* custom.css - ajustes finos e utilitários responsivos */
body { font-family: 'Inter', system-ui, sans-serif; }

/* ==========================================================================
   .table-cards — tabela que vira cards no mobile (< 768px), sem JS.
   Uso: <table class="table-cards ..."> e em cada <td> um data-label="Rótulo".
   Células especiais:
     td.card-title   -> primeira coluna vira título do card (sem rótulo)
     td.card-actions -> célula de ações (botões alinhados à direita)
     td.card-empty   -> linha de "nenhum registro" (ocupa o card inteiro)
   No desktop (>= 768px) a tabela permanece 100% inalterada.
   ========================================================================== */
@media (max-width: 767px) {
    table.table-cards,
    table.table-cards tbody { display: block; width: 100%; }

    table.table-cards thead { display: none; }

    table.table-cards tr {
        display: block;
        background: #164e63;               /* cyan-900 (mesmo tom dos cards) */
        border: none !important;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
        padding: 0.35rem 0;
        margin-bottom: 0.75rem;
    }

    table.table-cards td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.45rem 1rem;
        text-align: right;
        border: none !important;
    }

    table.table-cards td::before {
        content: attr(data-label);
        font-weight: 600;
        color: rgba(255, 255, 255, .55);
        text-align: left;
        white-space: nowrap;
    }

    /* Primeira coluna como título do card */
    table.table-cards td.card-title {
        text-align: left;
        font-weight: 700;
        font-size: 1rem;
        padding: 0.6rem 1rem 0.2rem;
    }
    table.table-cards td.card-title::before { content: none; }

    /* Célula de ações: rótulo à esquerda, botões maiores para toque */
    table.table-cards td.card-actions { justify-content: flex-end; gap: 0.25rem; padding-top: 0.6rem; }
    table.table-cards td.card-actions::before { margin-right: auto; }
    table.table-cards td.card-actions a,
    table.table-cards td.card-actions button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.25rem;
        min-height: 2.25rem;
        font-size: 1.05rem;
    }

    /* Linha vazia ocupa o card inteiro */
    table.table-cards td.card-empty { justify-content: center; text-align: center; }
    table.table-cards td.card-empty::before { content: none; }
}

/* ==========================================================================
   Peça 3 — Forms e toque no mobile (< 768px).
   1) font-size >= 16px em campos de formulário: o iOS/Safari dá ZOOM
      automático ao focar um campo com fonte menor que 16px. As telas usam
      text-sm (14px) em ~33 arquivos; esta regra corrige todas de uma vez,
      sem tocar no markup. No desktop os campos mantêm o text-sm original.
   2) alvo de toque confortável (min 44px) em campos de texto e selects.
   ========================================================================== */
@media (max-width: 767px) {
    input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
    input[type="password"], input[type="search"], input[type="date"], input[type="url"],
    input[type="datetime-local"], input:not([type]), select {
        min-height: 44px;
    }
}