/* Ajustes para celular das telas do cliente (carregado por pwa_head.php).
 * Só vale em telas estreitas; no computador nada muda.
 * Como este arquivo é carregado ANTES do CSS de cada página, as regras usam !important.
 * As tabelas viram "cartões" (uma linha = um cartão) com ajuda do pwa.js, que escreve o nome da coluna em cada célula.
 */
@media (max-width: 720px) {

    html { -webkit-text-size-adjust: 100%; }
    body { overflow-x: hidden; padding-bottom: env(safe-area-inset-bottom); }
    img, canvas, video { max-width: 100%; }

    /* ---- topo: quebra em linhas e deixa de ficar preso na tela (gastava muito espaço) ---- */
    .topbar {
        position: static !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        padding: calc(10px + env(safe-area-inset-top)) 14px 10px !important;
    }
    .topbar-left { flex: 1 1 100%; min-width: 0; }
    .topbar-right {
        flex: 1 1 100%;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: 0;
    }
    .topbar-right > * { max-width: 100%; }
    .cnpj-form, .empresa-switch { flex: 1 1 100%; min-width: 0 !important; }
    .cnpj-form select, .empresa-switch select, .topbar select { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
    .cnpj-form label { display: none; }

    /* ---- conteúdo ---- */
    .content, main.content { padding: 14px !important; max-width: 100% !important; }
    .grid, .main-grid, .duas-col { grid-template-columns: 1fr !important; }
    .card, .panel { padding: 14px !important; border-radius: 14px !important; }
    h1 { font-size: 20px !important; }

    /* ---- formulários: 16px evita o zoom automático do iPhone; alvos de toque maiores ---- */
    input, select, textarea { font-size: 16px !important; min-height: 44px; }
    input[type="checkbox"], input[type="radio"], input[type="file"] { min-height: 0; }
    .btn, button, .pill-user, .topbar-right a, input, select, textarea { box-sizing: border-box; }
    .btn, button, .pill-user, .topbar-right a { min-height: 40px; }
    .btn, .topbar-right a, .btn-baixar { display: inline-flex; align-items: center; justify-content: center; }
    .pill-user { display: inline-flex; align-items: center; }
    .filters, .filtros { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
    .filters .btn, .filters button, .filtros .btn, .filtros button { width: 100%; }
    .actions, .acoes { flex-wrap: wrap !important; }
    .pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
    dialog { max-width: 94vw; }

    /* ---- tabelas em cartões (o pwa.js marca as tabelas com a classe tabela-cartao) ---- */
    .table-wrap { overflow-x: visible !important; }
    table.tabela-cartao { min-width: 0 !important; width: 100% !important; border: 0 !important; display: block; }
    table.tabela-cartao thead { display: none !important; }
    table.tabela-cartao tbody { display: block; }
    table.tabela-cartao tr {
        display: block;
        margin: 0 0 12px;
        padding: 6px 12px;
        border: 1px solid rgba(148, 163, 184, .28);
        border-radius: 14px;
        background: rgba(148, 163, 184, .07);
    }
    table.tabela-cartao td {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        width: 100% !important;
        padding: 8px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(148, 163, 184, .16) !important;
        text-align: right !important;
        white-space: normal !important;
        word-break: break-word;
        background: transparent !important;
    }
    table.tabela-cartao td:last-child { border-bottom: 0 !important; }
    table.tabela-cartao td::before {
        content: attr(data-label);
        flex: 0 0 38%;
        max-width: 38%;
        text-align: left;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        opacity: .7;
    }
    table.tabela-cartao td[data-label=""]::before { display: none; }
    table.tabela-cartao td[data-label=""] { justify-content: flex-end; }
    table.tabela-cartao td[colspan] { display: block !important; text-align: center !important; }
    table.tabela-cartao td[colspan]::before { display: none; }
    table.tabela-cartao td .acoes, table.tabela-cartao td .actions { justify-content: flex-end; }
}