/**
 * mobile-global.css — Qualy Sistema D.E.C.A.
 * Correções universais de responsividade aplicadas a todos os módulos.
 * Não sobrescreve estilos específicos de módulo — apenas preenche lacunas.
 */

/* ── Previne scroll horizontal acidental na raiz ─────────────────────────── */
html {
    overflow-x: hidden;
}

/* ── Imagens responsivas universais ─────────────────────────────────────── */
img {
    max-width: 100%;
    height: auto;
}

/* ── Tabelas: container pai rola, tabela mantém largura natural ──────────── */
@media (max-width: 768px) {

    /* Wrappers explícitos de tabela: garantir overflow-x */
    .table-responsive,
    .table-wrap,
    .tbl-wrap,
    [class*="table-container"],
    [class*="table-scroll"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /*
     * Tabelas SEM wrapper: tornam-se block com scroll próprio.
     * NÃO sobrescrevemos thead/tbody/tr/td para preservar o layout de células.
     * NÃO aplicamos max-width: 100% para a tabela manter sua largura natural
     * e o scroll funcionar corretamente.
     */
    table:not(.no-mobile-block) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Touch targets mínimos (44px recomendado pela Apple/Google) ─── */
    button,
    .btn,
    [role="button"],
    input[type="submit"],
    input[type="button"],
    a.btn {
        min-height: 40px;
    }

    /* ── Inputs e selects: tamanho mínimo confortável ───────────────── */
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px !important; /* previne zoom automático no iOS */
        min-height: 42px;
    }

    /* ── Modais: altura máxima com scroll em telas pequenas ─────────── */
    .modal,
    .modal-box,
    .modal-content,
    [class*="modal-wrap"],
    [class*="modal-container"] {
        max-height: 90dvh;
        overflow-y: auto;
    }

    /* ── Grids genéricos: colapsar para 1 coluna ────────────────────── */
    .grid-cols-3,
    .grid-cols-4,
    .cols-3,
    .cols-4,
    [class*="col-3"],
    [class*="col-4"] {
        grid-template-columns: 1fr !important;
    }

    /* ── Texto mínimo legível ────────────────────────────────────────── */
    small, .text-sm, .text-xs, .small, caption {
        font-size: .78rem !important;
    }

    /* ── Pre / code: scroll horizontal ──────────────────────────────── */
    pre, code {
        overflow-x: auto;
        white-space: pre;
    }
}

@media (max-width: 480px) {

    /* ── Padding de página reduzido em telas muito pequenas ─────────── */
    .page-wrap,
    .container,
    .main-content,
    [class*="page-content"],
    [class*="main-wrap"] {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }

    /* ── Headers de cards: empilhar quando necessário ───────────────── */
    .card-header,
    .card-hdr,
    [class*="card-top"],
    [class*="section-header"] {
        flex-wrap: wrap;
        gap: .5rem;
    }

    /* ── Botões de ação em grupo: empilhar ──────────────────────────── */
    .btn-group,
    .action-bar,
    .actions,
    [class*="btn-row"],
    [class*="action-row"] {
        flex-wrap: wrap;
    }
}