/* =====================================================================
   AgroCPProteus — modo celular (mesmo padrão do AgroCPBridge)
   ---------------------------------------------------------------------
   Carregado depois do tema-agrocp.css. Tudo que mexe em layout fica
   dentro de @media de celular/tablet, então o desktop não muda.
   Fora das media queries só entram o wrapper .celula-valor (display:
   contents, invisível no desktop) e os estilos da barra de filtros e
   da ordenação, que têm d-md-none e não aparecem no desktop.
   Referência de teste: iPhone 16 (393 x 852) e Android 360px.
   ===================================================================== */


/* =====================================================================
   1. BASE
   ===================================================================== */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* No desktop o wrapper do valor da célula (tabela-responsiva.js) não existe para o layout */
.celula-valor {
    display: contents;
}

/* No app instalado (PWA, o pwa.js marca o <html>) não existe "tela cheia" do navegador */
.app-instalado .nav-item-fullscreen {
    display: none !important;
}


/* =====================================================================
   1.1 ÁREAS SEGURAS (notch / Dynamic Island / barra de gestos)
   ---------------------------------------------------------------------
   O viewport usa viewport-fit=cover (para o app instalado no iPhone
   ocupar a tela toda), então quem encosta na borda soma o env() no
   próprio espaçamento. Sem notch (desktop e Android) o env() é 0.
   ===================================================================== */

.app-header {
    padding-top: calc(var(--bs-navbar-padding-y, .5rem) + env(safe-area-inset-top, 0px));
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

.app-main {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

.app-footer {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

.app-sidebar {
    padding-top: env(safe-area-inset-top, 0px);
}

.modal-fullscreen .modal-header {
    padding-top: calc(1rem + env(safe-area-inset-top, 0px));
}

.modal-fullscreen .modal-footer {
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
}

#toast-container.toast-top-right,
#toast-container.toast-top-center,
#toast-container.toast-top-full-width {
    top: calc(12px + env(safe-area-inset-top, 0px));
}


/* =====================================================================
   2. FILTROS RECOLHÍVEIS E ORDENAÇÃO (filtros-mobile.js / tabela-responsiva.js)
   ---------------------------------------------------------------------
   A barra e o select de ordenação têm d-md-none: no desktop não aparecem.
   ===================================================================== */

.filtros-mobile-barra {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2.9rem;
    padding: .6rem .9rem;
    margin-bottom: .75rem;
    border: 1px solid var(--tema-verde-borda, #a6cdb4);
    border-radius: var(--tema-raio, 10px);
    background-color: var(--tema-verde-suave, #e6f2ea);
    color: var(--tema-verde-escuro, #0c4f29);
    font-weight: 600;
    text-align: left;
}

    .filtros-mobile-barra:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 .2rem rgba(var(--tema-verde-rgb, 17, 104, 55), .25);
    }

.filtros-mobile-seta {
    transition: transform .15s ease;
}

.filtros-mobile-barra[aria-expanded="true"] .filtros-mobile-seta {
    transform: rotate(180deg);
}

.ordenacao-mobile {
    margin-bottom: .75rem;
}

    .ordenacao-mobile .form-label {
        font-size: .85rem;
        font-weight: 600;
        color: var(--bs-secondary-color);
    }


/* =====================================================================
   3. TABLET E CELULAR (< 992px): menu lateral sobreposto
   ===================================================================== */

@media (max-width: 991.98px) {

    /* Topo fixo como em app; o conteúdo rola por baixo */
    .app-header {
        position: sticky;
        top: 0;
        z-index: 1030;
    }

    /* 100vh no iOS conta a área atrás das barras do Safari */
    .sidebar-expand-lg .app-sidebar {
        max-height: 100dvh;
    }

        .sidebar-expand-lg .app-sidebar .sidebar-wrapper {
            height: calc(100dvh - 3.5rem - 1px);
        }

    /* Itens do menu lateral com área de toque maior */
    .app-sidebar .sidebar-menu .nav-link {
        padding-top: .7rem;
        padding-bottom: .7rem;
    }

    /* Menu fechado fica fora da tela, mas a sombra vazava na borda esquerda */
    body:not(.sidebar-open) .app-sidebar {
        box-shadow: none !important;
    }
}


/* =====================================================================
   4. CELULAR (< 768px)
   ===================================================================== */

@media (max-width: 767.98px) {

    /* ---------- Topo ---------- */
    .app-header .container-fluid {
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .app-header .navbar-nav .nav-link {
        padding-left: .5rem;
        padding-right: .5rem;
    }

    /* "Opções" vira só o ícone; a setinha não precisa */
    .app-header .user-menu > .dropdown-toggle::after {
        display: none;
    }

    /* No celular o navegador já é a tela inteira */
    .app-header .nav-item-fullscreen {
        display: none;
    }

    .app-header .user-menu > .dropdown-menu {
        width: min(280px, calc(100vw - 1rem));
    }

    /* "Opções" vira o avatar com as iniciais (padrão do Bridge) */
    .avatar-circle-topo {
        width: 30px;
        height: 30px;
        min-width: 30px;
        font-size: .75rem;
        font-weight: 600;
    }

    /* ---------- Cabeçalho e espaçamento das telas ---------- */
    .app-main .app-content-header {
        padding-top: .75rem;
        padding-bottom: .5rem;
    }

        .app-main .app-content-header h3 {
            font-size: 1.3rem;
        }

    .app-content > .container-fluid,
    .app-content-header > .container-fluid {
        padding-left: .6rem;
        padding-right: .6rem;
    }

    .app-main .card-body {
        padding: .85rem;
    }

    .app-main .card-header {
        padding: .75rem .85rem;
    }

    .app-content .card-title {
        font-size: 1rem;
        font-weight: 600;
    }

    /* ---------- Rodapé: sai do fixo e libera a tela (padrão do Bridge) ---------- */
    .fixed-footer .app-footer {
        position: static;
        min-height: 0;
        padding-top: .75rem;
        padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
        font-size: .75rem;
        text-align: center;
    }

    /* ---------- Filtros (filtros-mobile.js) ----------
       Recolhido esconde as colunas da .barra-filtros, menos a do Pesquisar (.filtro-fixo) */
    .filtros-recolhidos > .row.barra-filtros > :not(.filtro-fixo) {
        display: none !important;
    }

    /* Linha só com colunas escondidas não deixa o espaço do g-3 / mb-3 */
    .filtros-recolhidos > .row.barra-filtros:not(:has(> .filtro-fixo)) {
        display: none;
    }

    .row.barra-filtros .btn {
        min-height: 2.75rem;
    }

    /* ---------- Cabeçalho do card: título e botões na mesma linha quando cabem, senão quebram ----------
       Padrão das listagens: card-header > div.d-flex > h3.card-title + div.ms-auto.d-flex (botões) */
    .card-header > .d-flex {
        flex-wrap: wrap;
        gap: .5rem;
    }

        .card-header > .d-flex > .card-title {
            flex: 1 1 auto;
            min-width: 0;
        }

        .card-header > .d-flex > .d-flex {
            flex-wrap: wrap;
            margin-left: auto;
            justify-content: flex-end !important;
        }

            .card-header > .d-flex > .d-flex > .btn,
            .card-header > .d-flex > .d-flex > .btn-group {
                flex: 0 0 auto;
            }

    /* Texto longo de botão (ex.: "Adicionar Matéria Prima ao Grupo de Produto") quebra em vez de estourar */
    .card-header .btn,
    .barra-acoes-mobile .btn {
        max-width: 100%;
        white-space: normal;
    }

    .barra-acoes-mobile {
        flex-wrap: wrap;
        gap: .5rem;
    }

    /* ---------- Paginação (configurarTabela): quebra linha e fica centralizada ---------- */
    .pagination {
        flex-wrap: wrap;
        justify-content: center !important;
        gap: .25rem;
    }

        /* O Bootstrap junta os itens com margem negativa; com gap não serve */
        .pagination .page-item:not(:first-child) .page-link {
            margin-left: 0;
        }

        .pagination .page-link {
            padding: .25rem .55rem;
            font-size: .875rem;
            border-radius: .25rem;
        }

    .paginacao-tabela .pagination {
        justify-content: center;
    }

    /* ---------- Abas em seletor (filtros-mobile.js): o .nav some e fica o <select> ---------- */
    .abas-select-mobile {
        display: none !important;
    }

    .abas-mobile-select {
        margin-bottom: .75rem;
    }

        .abas-mobile-select .form-label {
            font-size: .85rem;
            font-weight: 600;
            color: var(--bs-secondary-color);
        }

    /* Abas dos modais (pills): quebram linha compactas em vez de rolar de lado */
    .modal .nav-pills {
        gap: .35rem;
    }

        .modal .nav-pills .nav-link {
            padding: .35rem .7rem;
            font-size: .85rem;
        }

    /* ---------- Modais ---------- */
    .modal-fullscreen .modal-header,
    .modal-fullscreen .modal-body,
    .modal-fullscreen .modal-footer {
        padding-left: .85rem;
        padding-right: .85rem;
    }

    .modal-header .modal-title,
    .modal-header h1 {
        font-size: 1.1rem;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .modal-footer {
        gap: .5rem;
    }

    /* Tabelas chave/valor dos modais (ex.: status da confirmação do Atualizador) quebram o texto
       em vez de vazar da célula (o <style> da tela deixa toda .table em nowrap) */
    .modal .table th,
    .modal .table td {
        white-space: normal;
    }


    /* =================================================================
       TABELAS EM CARTÃO (.tabela-mobile + tabela-responsiva.js)
       -----------------------------------------------------------------
       Cada linha vira um cartão; o rótulo de cada célula vem do <th>
       (data-label). As linhas de título e de ações do thead
       (.tabela-admin-titulo, .tabela-admin-acoes) continuam à vista;
       só a linha com os nomes das colunas some.
       O display da linha não leva !important: as telas escondem linhas
       com .d-none, style="display:none" (jQuery .toggle/.hide) e
       .ocultar-valores, e isso tem que continuar valendo.
       ================================================================= */

    /* Sem rolagem lateral: cada linha vira um cartão */
    .tem-tabela-mobile {
        overflow-x: visible !important;
    }

    /* Área rolável de altura fixa (modais) solta: a página/modal rola, não a caixinha.
       As listas com rolagem infinita (CriarListaPaginada com container) mantêm a altura,
       senão o carregamento da próxima página dispara sem parar */
    .tem-tabela-mobile:not(.lista-aba-tabela-preco):not(.lista-aba-vigencia) {
        max-height: none !important;
        overflow-y: visible !important;
    }

    .tabela-mobile,
    .tabela-mobile > thead,
    .tabela-mobile > tbody,
    .tabela-mobile > tfoot,
    .tabela-mobile > * > tr,
    .tabela-mobile > * > tr > td,
    .tabela-mobile > thead > tr > th {
        display: block;
        width: auto;
        max-width: 100%;
    }

    .tabela-mobile {
        --bs-table-bg: transparent;
        border: 0 !important;
        border-radius: 0 !important;
        background-color: transparent;
    }

        /* Cabeçalho: só a linha dos nomes das colunas some (vira o rótulo de cada célula) */
        .tabela-mobile > thead {
            position: static;
        }

            .tabela-mobile > thead > tr:last-child,
            .tabela-mobile > * > tr.linha-mobile-cabecalho {
                display: none;
            }

            .tabela-mobile > thead > tr > th {
                width: auto !important;
                border-radius: var(--tema-raio, 10px) !important;
                white-space: normal;
            }

            .tabela-mobile > thead > tr.tabela-admin-acoes,
            .tabela-mobile > thead > tr.tabela-admin-titulo {
                margin-bottom: .75rem;
            }

                .tabela-mobile > thead > tr.tabela-admin-titulo h3 {
                    font-size: 1.1rem;
                }

        .tabela-mobile > tbody > tr,
        .tabela-mobile > tfoot > tr {
            margin-bottom: .75rem;
            padding: 0;
            border: 1px solid #e3e7e5;
            border-radius: var(--tema-raio, 10px);
            background-color: var(--bs-body-bg);
            box-shadow: 0 1px 3px rgba(16, 24, 20, .06);
            overflow: hidden;
        }

            .tabela-mobile > tbody > tr:last-child,
            .tabela-mobile > tfoot > tr:last-child {
                margin-bottom: 0;
            }

            .tabela-mobile > tbody > tr > td,
            .tabela-mobile > tfoot > tr > td {
                display: flex;
                align-items: baseline;
                justify-content: space-between;
                gap: .75rem;
                width: auto !important;
                min-width: 0 !important;
                max-width: none !important;
                min-height: 0;
                padding: .55rem .9rem;
                border: 0 !important;
                border-bottom: 1px solid #f0f2f1 !important;
                border-radius: 0 !important;
                text-align: right;
                white-space: normal !important;
                overflow-wrap: anywhere;
            }

                .tabela-mobile > tbody > tr > td:last-child,
                .tabela-mobile > tfoot > tr > td:last-child {
                    border-bottom: 0 !important;
                }

                /* Rótulo só do tamanho do texto (até 42%) */
                .tabela-mobile > tbody > tr > td[data-label]:not([data-label=""])::before,
                .tabela-mobile > tfoot > tr > td[data-label]:not([data-label=""])::before {
                    content: attr(data-label);
                    flex: 0 0 auto;
                    max-width: 42%;
                    text-align: left;
                    font-size: .75rem;
                    font-weight: 600;
                    text-transform: uppercase;
                    letter-spacing: .02em;
                    line-height: 1.2;
                    color: var(--bs-secondary-color);
                    overflow-wrap: normal;
                }

        /* O valor ocupa o resto e pode encolher/quebrar (badges, nomes longos) */
        .tabela-mobile td > .celula-valor {
            display: block;
            flex: 1 1 0;
            min-width: 0;
            text-align: right;
            overflow-wrap: anywhere;
        }

            .tabela-mobile td > .celula-valor > * {
                max-width: 100%;
            }

            .tabela-mobile td > .celula-valor .badge {
                white-space: normal;
            }

            /* Grupos de badges/botões: quebram linha e vão para a direita.
               !important porque os utilitários do Bootstrap também são */
            .tabela-mobile td > .celula-valor .d-flex:not(.flex-column) {
                justify-content: flex-end !important;
                flex-wrap: wrap !important;
            }

            .tabela-mobile td > .celula-valor .d-flex.flex-column {
                align-items: flex-end !important;
            }

        /* Célula com campo (preço do grupo, micros/embalagens do item): o campo ocupa o resto da linha */
        .tabela-mobile > tbody > tr > td {
            align-items: center;
        }

            .tabela-mobile > tbody > tr > td > .input-group,
            .tabela-mobile > tbody > tr > td > input.form-control,
            .tabela-mobile > tbody > tr > td > select.form-select {
                flex: 1 1 0;
                min-width: 0;
                max-width: none !important;
                margin-bottom: 0 !important;
            }

        /* Célula vazia some (inclusive só com espaços, marcada pelo tabela-responsiva.js) */
        .tabela-mobile > tbody > tr > td:empty,
        .tabela-mobile > tfoot > tr > td:empty,
        .tabela-mobile > * > tr > td.celula-vazia {
            display: none;
        }

        /* Célula sem rótulo (ações) fica à direita */
        .tabela-mobile > tbody > tr > td[data-label=""],
        .tabela-mobile > tfoot > tr > td[data-label=""] {
            justify-content: flex-end;
        }

        /* Linha de uma célula só (grupo, progresso, "nenhum registro") ocupa o cartão inteiro */
        .tabela-mobile > tbody > tr.linha-mobile-inteira > td,
        .tabela-mobile > tbody > tr > td[colspan][data-label=""]:only-child {
            display: block;
            text-align: left;
        }

            .tabela-mobile > tbody > tr.linha-mobile-inteira > td > .celula-valor,
            .tabela-mobile > tbody > tr > td[colspan][data-label=""]:only-child > .celula-valor {
                text-align: left;
            }

        /* Totais (tfoot): "Total:" e o valor na mesma linha do cartão verde */
        .tabela-mobile > tfoot > tr {
            display: flex;
            flex-wrap: wrap;
            border-color: var(--tema-verde-borda, #a6cdb4);
            background-color: var(--tema-verde-suave, #e6f2ea);
        }

            .tabela-mobile > tfoot > tr > td {
                flex: 1 1 auto;
                border-bottom: 0 !important;
                background-color: transparent !important;
            }

                .tabela-mobile > tfoot > tr > td[colspan] {
                    flex: 0 0 auto;
                    justify-content: flex-start;
                }

        /* Barra de estado (inativo, erro, selecionado) vai para a borda do cartão, não só para a 1ª célula */
        .tabela-mobile > tbody > tr > td:first-child {
            border-left: 0 !important;
        }

        .tabela-mobile > tbody > tr.table-danger {
            border-left: 4px solid #e4a3aa;
            background-color: #fdf1f2;
        }

        .tabela-mobile > tbody > tr.table-warning {
            border-left: 4px solid #fd7e14;
            background-color: #fff7ef;
        }

        .tabela-mobile > tbody > tr.table-info {
            border-left: 4px solid var(--tema-verde, #116837);
            background-color: var(--tema-verde-suave, #e6f2ea);
        }

        .tabela-mobile > tbody > tr.table-success {
            border-left: 4px solid #4caf50;
            background-color: #f2f9f4;
        }

    .tabela-mobile > tbody > tr[onclick]:active {
        transform: scale(.99);
    }

    /* text-nowrap da tabela de desktop estoura o cartão no celular */
    .tabela-mobile.text-nowrap,
    .tabela-mobile td.text-nowrap,
    .tabela-mobile td .text-nowrap {
        white-space: normal !important;
    }

    /* ---------- Cartão com título (.tabela-mobile-titulo nas listagens) ----------
       A primeira célula (Nº) vira o título do cartão, com o rótulo pequeno na frente
       e alinhada à esquerda; linha clicável ganha a setinha de "abrir" */
    .tabela-mobile-titulo > tbody > tr > td:first-child:not([colspan]) {
        justify-content: flex-start;
        gap: .4rem;
        padding-top: .7rem;
        padding-bottom: .7rem;
        border-bottom: 1px solid #e3e7e5 !important;
        font-size: 1rem;
        font-weight: 600;
        text-align: left;
    }

        .tabela-mobile-titulo > tbody > tr > td:first-child:not([colspan])::before {
            max-width: none;
        }

        .tabela-mobile-titulo > tbody > tr > td:first-child:not([colspan]) > .celula-valor {
            flex: 1 1 auto;
            text-align: left;
        }

            .tabela-mobile-titulo > tbody > tr > td:first-child:not([colspan]) > .celula-valor .d-flex:not(.flex-column) {
                justify-content: flex-start !important;
            }

    .tabela-mobile-titulo > tbody > tr[onclick] > td:first-child:not([colspan])::after {
        content: "\f054";
        margin-left: auto;
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: .8rem;
        color: #9aa5a0;
    }


    /* ---------- Cartão empilhado (.tabela-mobile-empilhada) ----------
       Para células com várias linhas (empresa + tabela + vigência, datas, dólar): rótulo em cima
       e o conteúdo alinhado à esquerda na largura toda, em vez de espremido à direita do rótulo */
    .tabela-mobile-empilhada > tbody > tr > td:not(:first-child):not([colspan]) {
        flex-direction: column;
        align-items: stretch;
        gap: .2rem;
        text-align: left;
    }

        .tabela-mobile-empilhada > tbody > tr > td:not(:first-child):not([colspan])::before {
            max-width: none !important;
        }

        .tabela-mobile-empilhada > tbody > tr > td:not(:first-child):not([colspan]) > .celula-valor {
            text-align: left !important;
        }

            .tabela-mobile-empilhada > tbody > tr > td:not(:first-child):not([colspan]) > .celula-valor .d-flex:not(.flex-column) {
                justify-content: flex-start !important;
            }

            .tabela-mobile-empilhada > tbody > tr > td:not(:first-child):not([colspan]) > .celula-valor .d-flex.flex-column {
                align-items: flex-start !important;
            }


    /* =================================================================
       TELAS ESPECÍFICAS
       ================================================================= */

    /* ---------- Atualizador › Simulação (.grade-simulacao) ----------
       Pode ter centenas de itens: em vez do cartão comum (9 linhas por item), um bloco compacto.
       Checkbox à esquerda, Produto e Status em cima e os 5 valores em 2 colunas com rótulo pequeno.
       A Tabela de Preço sai (é a mesma da aba). O botão Atualizar e o "marcar todos" continuam no topo */
    .grade-simulacao-rolagem {
        max-height: none !important;
        overflow: visible !important;
    }

    .grade-simulacao.tabela-mobile {
        margin: 0 !important;
    }

        .grade-simulacao > thead > tr.tabela-admin-acoes > th .btn {
            width: 100%;
            white-space: normal;
        }

        /* Da linha dos nomes das colunas fica só o "marcar todos" */
        .grade-simulacao > thead > tr:last-child {
            display: flex;
            margin-bottom: .75rem;
        }

            .grade-simulacao > thead > tr:last-child > th:not(:first-child) {
                display: none;
            }

            .grade-simulacao > thead > tr:last-child > th:first-child {
                display: flex;
                align-items: center;
                gap: .6rem;
                width: 100% !important;
                padding: .55rem .9rem;
                text-align: left !important;
                text-transform: none;
                letter-spacing: 0;
                font-size: .9rem;
            }

                .grade-simulacao > thead > tr:last-child > th:first-child::after {
                    content: "Marcar / desmarcar todos";
                }

        /* 3 colunas: Preço Tabela | Novo Custo | Preço Final na 1ª linha de valores, Margem PJ | PF na 2ª */
        .grade-simulacao > tbody > tr {
            position: relative;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: .35rem .6rem;
            padding: .6rem .75rem .65rem 2.9rem;
            font-size: .85rem;
        }

            .grade-simulacao > tbody > tr > td {
                display: block;
                padding: 0;
                border-bottom: 0 !important;
                text-align: left;
            }

                .grade-simulacao > tbody > tr > td > .celula-valor {
                    text-align: left;
                }

                /* Rótulo pequeno em cima do valor */
                .grade-simulacao > tbody > tr > td[data-label]:not([data-label=""])::before {
                    display: block;
                    max-width: none;
                    margin-bottom: .1rem;
                    font-size: .62rem;
                }

                /* Checkbox no canto esquerdo do bloco */
                .grade-simulacao > tbody > tr > td:nth-child(1) {
                    position: absolute;
                    top: .7rem;
                    left: .8rem;
                }

                /* Produto e Status ocupam a linha inteira, sem rótulo */
                .grade-simulacao > tbody > tr > td:nth-child(3) {
                    grid-column: 1 / -1;
                    order: -2;
                    font-weight: 600;
                }

                .grade-simulacao > tbody > tr > td:nth-child(2) {
                    grid-column: 1 / -1;
                    order: -1;
                }

                    .grade-simulacao > tbody > tr > td:nth-child(2)::before,
                    .grade-simulacao > tbody > tr > td:nth-child(3)::before {
                        display: none !important;
                    }

                    .grade-simulacao > tbody > tr > td:nth-child(2) .badge {
                        text-align: left;
                    }

                .grade-simulacao > tbody > tr > td:nth-child(4) {
                    display: none;
                }

                /* Preço Final sobe para a linha dos preços; as margens ficam embaixo */
                .grade-simulacao > tbody > tr > td:nth-child(9) {
                    order: 1;
                }

                .grade-simulacao > tbody > tr > td:nth-child(7),
                .grade-simulacao > tbody > tr > td:nth-child(8) {
                    order: 2;
                }

                /* Variação (%) pequena embaixo do valor; o &nbsp; que alinhava as colunas no desktop sai */
                .grade-simulacao > tbody > tr > td:nth-child(n+5) .celula-valor > span:last-child:not([class]) {
                    display: none;
                }

                .grade-simulacao > tbody > tr > td:nth-child(n+5) strong {
                    font-size: .72rem;
                    white-space: nowrap;
                }

                .grade-simulacao > tbody > tr > td:nth-child(n+5) .celula-valor {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

    /* Filtro de status: 4 botões de texto longo em grade 2x2 em vez de um grupo de 650px */
    .grupo-filtros-status {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .4rem;
        width: 100%;
    }

        /* Compactos: rótulo em uma linha (o detalhe vai no title) */
        .grupo-filtros-status > .btn {
            margin-left: 0 !important;
            padding: .3rem .4rem;
            border-radius: var(--bs-border-radius) !important;
            font-size: .78rem;
            line-height: 1.25;
            white-space: normal;
        }

    /* ---------- Botões da tela (Buscar/Simular + atalhos): principal na linha toda, atalhos lado a lado ----------
       Sem isso eram 3-4 botões grandes empilhados ocupando meia tela. O Voltar sai: o menu e o navegador já voltam */
    .row.acoes-mobile {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        margin-left: 0;
        margin-right: 0;
    }

        .row.acoes-mobile > * {
            flex: 1 1 0;
            width: auto;
            margin-top: 0;
            padding-left: 0;
            padding-right: 0;
        }

        .row.acoes-mobile > .acao-principal {
            flex-basis: 100%;
        }

        .row.acoes-mobile > .acao-voltar {
            display: none !important;
        }

        .row.acoes-mobile .btn {
            padding: .45rem .5rem;
            font-size: .875rem;
        }

    /* Duas abas que dividem a largura (Pendentes | Concluídas) */
    .nav-abas-mobile {
        flex-wrap: nowrap;
    }

        .nav-abas-mobile > .nav-link {
            flex: 1 1 0;
            text-align: center;
            white-space: nowrap;
        }

    .ultima-atualizacao {
        margin-bottom: .5rem;
        color: var(--bs-secondary-color);
        font-size: .75rem;
    }

    /* ---------- Atualizações: progresso e histórico da pendente grudados no cartão do item ---------- */
    .tabela-mobile > tbody > tr.linha-mobile-inteira {
        margin-top: -.75rem;
        border-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        box-shadow: none;
    }

    .tabela-mobile > tbody > tr:has(+ tr.linha-mobile-inteira) {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    /* ---------- Formulado › Modificar: dados do formulado em cima, botões embaixo ---------- */
    .formulado-info {
        flex-direction: column;
        align-items: stretch !important;
        gap: .75rem;
    }

        .formulado-info > .flex-shrink-0 {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
            margin-left: 0 !important;
            white-space: normal !important;
        }

    /* Totalizador do formulado (4 valores no modal-header): 2 por linha */
    .totalizador-formulado {
        flex-wrap: wrap;
        row-gap: .75rem;
    }

        .totalizador-formulado > * {
            flex: 1 1 50% !important;
            min-width: 0;
        }

        /* Rodapé fixo do modal: compacto para sobrar tela para a composição */
        .totalizador-formulado h2 {
            font-size: .68rem !important;
            line-height: 1.2;
        }

            .totalizador-formulado h2 small {
                display: none;
            }

        .totalizador-formulado h4 {
            margin-bottom: 0;
            font-size: .95rem;
        }

    .modal-header:has(.totalizador-formulado) {
        flex-wrap: wrap;
        padding-top: .5rem;
        padding-bottom: .5rem;
    }

    /* ---------- Início: abas do resumo rolam de lado; listas e gráfico sem a altura do notebook ---------- */
    .dashboard-header > .d-flex:last-child {
        width: 100%;
        min-width: 0;
    }

    .dashboard-abas {
        flex: 1 1 auto;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

        .dashboard-abas::-webkit-scrollbar {
            display: none;
        }

        .dashboard-abas > .btn {
            flex: 0 0 auto;
        }

    .dashboard-rolagem {
        max-height: none;
    }

    .dashboard-tabela.tabela-mobile td {
        max-width: none;
        overflow: visible;
        text-overflow: clip;
    }

    .dashboard-slide-titulo {
        flex-wrap: wrap;
    }

    /* ---------- Matéria prima: grade de preços em cartões dentro do card da seção, com respiro ---------- */
    .mp-secao .tem-tabela-mobile {
        padding: .6rem;
    }

    /* ---------- Cópia de composição: "atual → nova" quebra em vez de estourar o card ---------- */
    .copia-de-para {
        white-space: normal !important;
    }
}


/* =====================================================================
   5. CELULAR PEQUENO (< 576px)
   ===================================================================== */

@media (max-width: 575.98px) {

    /* O menu lateral já mostra onde está; o caminho só ocupava uma linha */
    .app-content-header .breadcrumb {
        display: none;
    }
}


/* =====================================================================
   6. iOS: sem zoom automático ao tocar no campo
   ---------------------------------------------------------------------
   O Safari dá zoom em campo com fonte menor que 16px e não volta.
   -webkit-touch-callout só existe no Safari do iOS/iPadOS.
   ===================================================================== */

@supports (-webkit-touch-callout: none) {

    @media (max-width: 991.98px) {

        input.form-control,
        select.form-select,
        textarea.form-control,
        .select2-container .select2-search__field,
        .select2-container .select2-selection {
            font-size: 16px;
        }
    }
}