/* =========================================================
   CLIENTES - LISTA (clienteController) - MOBILE ONLY
   Não afeta outras telas
   ========================================================= */
@media (max-width: 767px) {

    /* Escopo forte só nessa tela */
    section.page.search-page[ng-controller="clienteController"] {
        overflow-x: hidden;
        /* evita o título ficar “comido” pelo header global */
        padding-top: 56px; /* ajuste se seu header for maior/menor */
    }

        /* ---------- HEADER DA TELA (não sticky no mobile) ---------- */
        section.page.search-page[ng-controller="clienteController"] > header.header-fixed {
            position: static !important;
            top: auto !important;
            left: auto !important;
            right: auto !important;
            width: auto !important;
            z-index: auto !important;
            margin: 0 !important;
            padding: 12px 12px 8px !important;
            background: #fff;
        }

            section.page.search-page[ng-controller="clienteController"] > header.header-fixed > h1 {
                margin: 0 0 10px 0 !important;
                font-size: 20px;
                line-height: 1.2;
            }

            /* ---------- BOTÕES DO HEADER (voltar/exportar/novo) ---------- */
            section.page.search-page[ng-controller="clienteController"] > header.header-fixed > ul.filters {
                display: flex !important;
                flex-direction: column !important;
                gap: 8px !important;
                margin: 0 !important;
                padding: 0 !important;
                list-style: none !important;
                float: none !important;
                width: 100% !important;
            }

                section.page.search-page[ng-controller="clienteController"] > header.header-fixed > ul.filters > li {
                    float: none !important;
                    width: 100% !important;
                    margin: 0 !important;
                    padding: 0 !important;
                }

                    section.page.search-page[ng-controller="clienteController"] > header.header-fixed > ul.filters > li > .btn,
                    section.page.search-page[ng-controller="clienteController"] > header.header-fixed > ul.filters > li > a.btn {
                        display: flex !important;
                        align-items: center !important;
                        justify-content: center !important;
                        width: 100% !important;
                        min-height: 40px !important;
                    }

        /* ---------- BOX FILTROS ---------- */
        section.page.search-page[ng-controller="clienteController"] > div > .box.box-border {
            margin: 10px 12px 12px !important;
        }

            section.page.search-page[ng-controller="clienteController"] > div > .box.box-border > h4 {
                margin: 0 !important;
                padding: 12px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: space-between !important;
            }

        /* ---------- “TOTAL / LIMPAR / ATUALIZAR” (NO-RESULTS) ---------- */
        section.page.search-page[ng-controller="clienteController"] > div > .no-results {
            margin: 0 12px 12px !important;
            padding: 12px !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 8px !important;
            float: none !important;
            width: auto !important;
        }

            /* se tiver <strong> e botões misturados, força ocupar 100% */
            section.page.search-page[ng-controller="clienteController"] > div > .no-results > * {
                float: none !important;
                width: 100% !important;
                max-width: 100% !important;
            }

            section.page.search-page[ng-controller="clienteController"] > div > .no-results .btn {
                width: 100% !important;
                min-height: 40px !important;
                white-space: normal;
            }

        /* =========================================================
       FIX: evitar “duplicação” visual dos blocos .no-results
       (o HTML tem vários .no-results com ng-show diferentes)
       No mobile mostramos SOMENTE o primeiro que estiver ativo.
       ========================================================= */

        /* esconde todos… */
        section.page.search-page[ng-controller="clienteController"] > div > .no-results {
            display: none !important;
        }

            /* …e mostra apenas o primeiro .no-results presente/ativo na ordem do DOM */
            section.page.search-page[ng-controller="clienteController"] > div > .no-results:first-of-type {
                display: flex !important;
            }

            /* se o primeiro estiver escondido por ng-show, o navegador ainda considera
       no DOM. Então liberamos “o primeiro visível” com uma técnica segura:
       qualquer .no-results que venha depois e esteja visível, pode aparecer. */
            section.page.search-page[ng-controller="clienteController"] > div > .no-results[style*="display: none"],
            section.page.search-page[ng-controller="clienteController"] > div > .no-results.ng-hide {
                display: none !important;
            }

            /* mostra o primeiro que NÃO estiver escondido */
            section.page.search-page[ng-controller="clienteController"] > div > .no-results:not(.ng-hide):not([style*="display: none"]) {
                display: flex !important;
            }

                /* e esconde quaisquer outros .no-results visíveis depois do primeiro */
                section.page.search-page[ng-controller="clienteController"] > div > .no-results:not(.ng-hide):not([style*="display: none"]) ~ .no-results {
                    display: none !important;
                }

        /* ---------- LISTA -> CARD ---------- */
        section.page.search-page[ng-controller="clienteController"] ul.list.list-users {
            margin: 0 !important;
            padding: 0 !important;
        }

            section.page.search-page[ng-controller="clienteController"] ul.list.list-users > li.row.list-item {
                display: block !important;
                margin: 0 12px 12px !important;
                padding: 16px !important;
                border-radius: 16px;
                background: #fff;
                box-shadow: 0 2px 6px rgba(0,0,0,.05);
            }

                /* zera as colunas no card */
                section.page.search-page[ng-controller="clienteController"] ul.list.list-users > li.row.list-item > [class*="col-"] {
                    float: none !important;
                    width: 100% !important;
                    max-width: 100% !important;
                    padding: 0 !important;
                    margin: 0 !important;
                }

            /* avatar central */
            section.page.search-page[ng-controller="clienteController"] ul.list.list-users easy-thumb {
                display: flex;
                justify-content: flex-start;
                margin-bottom: 10px;
            }

            /* textos */
            section.page.search-page[ng-controller="clienteController"] ul.list.list-users h4 {
                margin: 10px 0 8px !important;
            }

            section.page.search-page[ng-controller="clienteController"] ul.list.list-users p {
                margin: 0 0 6px 0 !important;
            }

            /* ---------- OPÇÕES (dropdown) ---------- */
            section.page.search-page[ng-controller="clienteController"] ul.list.list-users .dropdown.options {
                float: none !important;
                position: static !important;
                width: 100% !important;
                margin-top: 14px !important;
                text-align: center !important;
            }

                section.page.search-page[ng-controller="clienteController"] ul.list.list-users .dropdown.options > a.dropdown-toggle {
                    display: block !important;
                    width: 100% !important;
                    padding: 12px !important;
                    border: 1px solid #ddd !important;
                    border-radius: 14px !important;
                }

                /* menu abrindo “normal” (sem absolute maluco) */
                section.page.search-page[ng-controller="clienteController"] ul.list.list-users .dropdown.options > ul.dropdown-menu {
                    position: static !important;
                    float: none !important;
                    width: 100% !important;
                    margin: 8px 0 0 0 !important;
                    box-shadow: none !important;
                }
}