/* ============================================================================
   Camada mobile do CRM -- Atende Mais (2026-09-22)

   Tudo neste arquivo vive dentro de @media (max-width: 767.98px). No desktop ele
   nao muda uma unica regra: a tela continua exatamente como esta hoje.

   Carregado por ultimo em includes/head.php, depois do app.all.css e do
   custom-style.css, para vencer o tema sem precisar de !important -- exceto
   onde o HTML traz estilo inline (kanban), que esta marcado caso a caso.

   Telas cobertas: Ao Vivo, Kanban, Contatos e Visao Geral.
   ============================================================================ */

@media (max-width: 767.98px) {

    /* ------------------------------------------------------------------
       1. Barra de navegacao inferior (includes/mobile_nav.php)
       ------------------------------------------------------------------ */

    .crm-mobile-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        background: #fff;
        border-top: 1px solid #e0e5e2;
        /* Area segura do iPhone: sem isto a barra fica sob a barra de gestos. */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .crm-mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 8px 2px 9px;
        min-height: 52px;
        font-size: 10.5px;
        font-weight: 600;
        line-height: 1.1;
        text-align: center;
        text-decoration: none;
        color: #8b979b;
        border-top: 2px solid transparent;
        margin-top: -1px;
    }

    .crm-mobile-nav-item:hover,
    .crm-mobile-nav-item:focus {
        color: #5c6a6f;
        text-decoration: none;
    }

    .crm-mobile-nav-item .icon {
        width: 20px;
        height: 20px;
    }

    .crm-mobile-nav-item.active,
    .crm-mobile-nav-item.active:hover,
    .crm-mobile-nav-item.active:focus {
        color: #4c6ef5;
        border-top-color: #4c6ef5;
    }

    /* A barra do tema continua no DOM (varios scripts injetam botoes nela:
       #mobile-function-button em app.js, quick_add, tickets), mas quando a
       barra do CRM existe ela e quem manda. O ~ funciona porque mobile_nav.php
       e impresso antes dela em layout/index.php. */
    .crm-mobile-nav ~ .mobile-bottom-menu {
        display: none !important;
    }

    /* Espaco no fim da pagina para o conteudo nao terminar atras da barra.
       Vale para as duas: a do CRM e a do tema sao ambas fixed-bottom, entao o
       espaco serve nos dois casos e nao depende de saber qual esta na tela. */
    .main-scrollable-page {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }

    /* ------------------------------------------------------------------
       2. Acao "+" no topo (Contatos) -- includes/topbar.php
       ------------------------------------------------------------------ */

    .mobile-add-contact .nav-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 38px;
        min-height: 38px;
        color: #4c6ef5;
    }

    /* ------------------------------------------------------------------
       3. Alvos de toque
       ------------------------------------------------------------------ */

    .crm-mobile-nav-item,
    .mobile-add-contact .nav-link {
        -webkit-tap-highlight-color: rgba(76, 110, 245, 0.12);
    }
}

/* ============================================================================
   CONTATOS -- a tabela vira lista de cartoes
   ============================================================================
   Hoje o unico tratamento mobile de Contatos e ".table-responsive{font-size:12px}"
   na propria view: a tabela do desktop com letra menor, rolando para os lados.

   As colunas vem do DataTables (dashboard.php, _initContactsTable) e o wrapper
   appTable nao imprime data-label, entao o rotulo de cada linha do cartao sai
   daqui por posicao. As duas colunas invisiveis (a primeira e a ultima) nao
   chegam ao DOM, entao a contagem abaixo e a do HTML renderizado:

     1 Nome  2 Telefone  3 E-mail  4 Origem  5 Canal  6 Etapa  7 Acoes

   Se alguem mudar a ordem das colunas naquele arquivo, e aqui que desalinha.
   ============================================================================ */

@media (max-width: 767.98px) {

    #contacts-datatable thead {
        display: none;
    }

    #contacts-datatable,
    #contacts-datatable tbody,
    #contacts-datatable tr,
    #contacts-datatable td {
        display: block;
        width: auto;
    }

    #contacts-datatable tr {
        position: relative;
        background: #fff;
        border: 1px solid #e0e5e2;
        border-radius: 11px;
        padding: 11px 12px;
        margin-bottom: 8px;
    }

    #contacts-datatable td {
        border: 0;
        padding: 0;
        text-align: left !important;   /* vence o text-center das colunas 4 e 5 */
        width: auto !important;        /* vence w80/w100 */
    }

    /* Nome */
    #contacts-datatable td:nth-child(1) {
        font-size: 14px;
        font-weight: 650;
        line-height: 1.25;
        padding-right: 40px;           /* espaco do menu de acoes */
    }

    /* Telefone */
    #contacts-datatable td:nth-child(2) {
        font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
        font-size: 12px;
        color: #5c6a6f;
        margin-top: 2px;
    }

    /* E-mail */
    #contacts-datatable td:nth-child(3) {
        font-size: 12px;
        color: #8b979b;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #contacts-datatable td:nth-child(3):empty {
        display: none;
    }

    /* Origem, Canal e Etapa: viram uma linha de chips no rodape do cartao. */
    #contacts-datatable td:nth-child(4),
    #contacts-datatable td:nth-child(5),
    #contacts-datatable td:nth-child(6) {
        display: inline-block;
        margin: 7px 5px 0 0;
        font-size: 11px;
        line-height: 1.6;
    }

    #contacts-datatable td:nth-child(4):empty,
    #contacts-datatable td:nth-child(5):empty,
    #contacts-datatable td:nth-child(6):empty {
        display: none;
    }

    /* Acoes: canto superior direito do cartao. */
    #contacts-datatable td:nth-child(7) {
        position: absolute;
        top: 8px;
        right: 8px;
        margin: 0;
    }

    #contacts-datatable td:nth-child(7) .dropdown-toggle,
    #contacts-datatable td:nth-child(7) a {
        min-width: 34px;
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* A moldura da tabela nao serve mais para nada quando ela vira lista. */
    #contacts-datatable_wrapper .dataTables_scroll,
    #contacts-datatable_wrapper .dataTables_scrollHead {
        overflow: visible !important;
    }
}

/* ============================================================================
   VISAO GERAL -- funil em barras proporcionais
   ============================================================================
   O funil do desktop e desenhado em trapezio com clip-path (dashboard.php),
   usando as variaveis --left/--right/--left-next. Em 360px o recorte come as
   pontas e o numero fica ilegivel. No celular viram barras: mesma informacao,
   mesma cor, mesma ordem -- sem o recorte.
   ============================================================================ */

@media (max-width: 767.98px) {

    .funnel-container {
        max-width: 100%;
    }

    .funnel-layer {
        /* O clip-path vem inline no elemento, entao so cai com !important. */
        clip-path: none !important;
        -webkit-clip-path: none !important;
        /* A proporcao que o trapezio dava passa para a largura da barra. --pct e
           a mesma porcentagem que a view ja calcula para o tooltip; o piso de 42%
           garante que a ultima etapa ainda caiba o numero e o rotulo. */
        width: max(42%, var(--pct, 100%));
        /* O desktop centra com "margin: 0 auto 2px"; alinhado a esquerda as
           barras compartilham a mesma base e da para comparar o comprimento. */
        margin: 0 0 3px;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 12px;
        min-height: 0;
        border-radius: 8px;
        text-align: left;
    }

    .funnel-layer-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
    }

    .funnel-layer-title {
        font-size: 12.5px;
    }

    .funnel-layer-stats {
        margin-top: 0;
    }

    .funnel-layer-value {
        font-size: 17px;
    }

    /* Tooltip no hover nao existe em tela de toque. */
    .funnel-tooltip {
        display: none !important;
    }

    /* Botoes de periodo: faixa que rola, sem estourar a borda. */
    #period-filter {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
        padding-bottom: 6px;
        scrollbar-width: none;
    }
    #period-filter::-webkit-scrollbar {
        display: none;
    }
    #period-filter .btn {
        flex: 0 0 auto;
        min-height: 34px;
    }
}

/* ============================================================================
   MODAIS -- viram folha que sobe de baixo
   ============================================================================
   Vale para o modal de Editar Contato (customer_detail_modal.php) e para todos
   os outros, porque todos passam pelo mesmo #ajaxModal do tema. Modal centrado
   em tela de celular desperdica altura e deixa o botao de salvar fora de
   alcance; ancorado embaixo, o polegar chega.
   ============================================================================ */

@media (max-width: 767.98px) {

    #ajaxModal .modal-dialog {
        margin: 0;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        max-width: 100%;
        width: 100%;
    }

    #ajaxModal .modal-content {
        border: 0;
        border-radius: 16px 16px 0 0;
        max-height: 92vh;
        max-height: 92dvh;
    }

    #ajaxModal .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #ajaxModal .modal-footer {
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

    /* Campos com altura de toque e sem zoom automatico no iOS, que acontece
       quando a fonte do campo e menor que 16px. */
    #ajaxModal .form-control,
    #ajaxModal .form-select,
    #ajaxModal .select2-selection {
        min-height: 42px;
        font-size: 16px;
    }

    #ajaxModal .modal-footer .btn {
        min-height: 44px;
    }
}

/* ============================================================================
   KANBAN -- uma etapa por vez
   ============================================================================
   O quadro de colunas lado a lado nao cabe em 360px: vira uma faixa de colunas
   de 290px rolando na horizontal, e o rolar de dentro briga com o da pagina.
   No celular os chips (assets/js/kanban-mobile.js) escolhem a etapa e a coluna
   ocupa a largura toda, com um unico sentido de rolagem.
   ============================================================================ */

@media (max-width: 767.98px) {

    /* Faixa de etapas */
    .kanban-mobile-stages {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 1px 10px;
        scrollbar-width: none;
    }
    .kanban-mobile-stages::-webkit-scrollbar {
        display: none;
    }

    .kanban-mobile-stage {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 36px;
        padding: 7px 13px;
        border: 1px solid #e0e5e2;
        border-radius: 999px;
        background: #fff;
        color: #5c6a6f;
        font-size: 12.5px;
        font-weight: 600;
        white-space: nowrap;
        cursor: pointer;
    }

    .kanban-mobile-stage .cnt {
        font-size: 11px;
        font-weight: 600;
        background: #eef1ee;
        color: #5c6a6f;
        border-radius: 999px;
        padding: 1px 7px;
    }

    .kanban-mobile-stage.active {
        background: #15191b;
        border-color: #15191b;
        color: #fff;
    }
    .kanban-mobile-stage.active .cnt {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
    }

    /* Quadro em coluna unica, ocupando a largura toda.
       O board nasce com class="kanban-board d-flex", e o .d-flex do Bootstrap e
       display:flex!important -- um display:block simples aqui nunca venceria.
       Enquanto ele seguia flex, a coluna com flex:none e width:auto encolhia ate
       o tamanho do conteudo e sobrava faixa vazia a direita (relato 2026-09-24). */
    #store-kanban-container .kanban-board-mobile {
        display: block !important;
        overflow-x: visible;
        gap: 0 !important;        /* o gap:12px inline nao separa mais nada */
    }

    /* A largura da etapa NAO mora mais aqui -- ela esta no <style> da propria
       view (integration_hub/dashboard.php). Motivo: aquele bloco viaja com o
       HTML e nunca fica em cache. Esta regra ja esteve neste arquivo, publicada
       e correta no servidor, e mesmo assim nao chegou ao aparelho: o Safari
       guardava a folha antiga e a coluna voltava aos 290px fixos. Regra da qual
       o encaixe da tela depende nao pode morar em arquivo cachavel. */

    /* A barra de rolagem lateral duplicada nao tem mais o que rolar. */
    .kanban-scroll-top {
        display: none;
    }

    /* Cabecalho da etapa: o chip ja diz qual e, entao ele vira so o resumo. */
    .kanban-board-mobile .kanban-column .card-header {
        border-radius: 10px 10px 0 0;
    }

    /* Cards: alvo de toque maior. A moldura ja nao e mais inline, entao estas
       regras pegam sem !important. */
    .kanban-card {
        border-radius: 12px;
        margin-bottom: 8px;
    }

    /* Arrastar nao funciona bem com o dedo -- no celular a etapa se muda dentro
       de Editar Contato, que tem o campo Etapa junto de canal, origem e
       responsavel. O cursor de "arrastavel" so confundiria. */
    .kanban-card.kanban-card-draggable {
        cursor: default;
    }

    /* A fileira de acoes do rodape do card e de icones de 14px com 4px de
       respiro: alvo de 22px, metade do minimo confortavel. No celular cada um
       vira um alvo de 40px. */
    .kanban-card .btn-pipeline-detail,
    .kanban-card .btn-edit-contact,
    .kanban-card .btn-pipeline-note,
    .kanban-card .btn-pipeline-claim,
    .kanban-card .btn-pipeline-delete,
    .kanban-card .btn-chat-instance {
        display: inline-flex !important;   /* padding inline no HTML da view */
        align-items: center;
        justify-content: center;
        min-width: 40px;
        min-height: 40px;
        border-radius: 9px;
    }

    /* Editar Contato e a acao principal no celular: e por ela que se muda a
       etapa, o canal, a origem e a vendedora. Ganha fundo para se destacar dos
       outros icones da fileira. */
    .kanban-card .btn-edit-contact {
        background: #eef1fe;
    }

    .kanban-card .btn-chat-instance {
        min-width: 0;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Filtros do Kanban: empilham em vez de espremer. */
    #store-kanban-container .form-select-sm,
    #store-kanban-container .form-control-sm {
        min-height: 38px;
        font-size: 16px;   /* impede o zoom automatico do iOS ao focar */
    }
}

/* ============================================================================
   AJUSTES 2026-09-23 -- filtros do Kanban, barra de Contatos, graficos
   ============================================================================ */

@media (max-width: 767.98px) {

    /* ------------------------------------------------------------------
       KANBAN -- filtros em folha
       ------------------------------------------------------------------
       A faixa original tem oito controles num flex-wrap, e os quatro selects
       nascem com min-width de 120 a 140px inline. Em 360px cabem dois por
       linha e a sobra joga os botoes para onde der. Aqui ela some: o
       kanban-mobile.js move os proprios elementos para a barra nova e para a
       folha (nao recria -- os handlers e a leitura em loadKanban continuam).
       ------------------------------------------------------------------ */

    .kanban-filters-moved {
        display: none !important;
    }

    .kanban-mobile-filterbar {
        display: flex;
        gap: 7px;
        margin-bottom: 8px;
    }

    /* Vence o "flex:1;min-width:120px" inline que a busca traz do desktop. */
    .kanban-mobile-filterbar #kanban-search {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        min-height: 42px;
        border-radius: 10px;
        font-size: 16px;   /* abaixo disto o iOS da zoom ao focar */
    }

    .kanban-mobile-filterbar .kmf-btn {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 42px;
        padding: 0 13px;
        font-family: inherit;
        font-size: 13px;
        font-weight: 650;
        color: #5c6a6f;
        background: #fff;
        border: 1px solid #e0e5e2;
        border-radius: 10px;
        cursor: pointer;
    }
    .kanban-mobile-filterbar .kmf-btn.on {
        background: #eef1fe;
        border-color: #4c6ef5;
        color: #2b47c4;
    }
    .kanban-mobile-filterbar .kmf-n {
        font-size: 10px;
        font-weight: 700;
        background: #4c6ef5;
        color: #fff;
        border-radius: 999px;
        padding: 1px 6px;
    }

    /* O botao de atualizar entra na barra como icone. */
    .kanban-mobile-filterbar #btn-kanban-refresh {
        flex: 0 0 auto;
        width: 42px;
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
    }

    /* Chips do que esta filtrado, com um toque para remover. */
    .kanban-mobile-activechips {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-bottom: 8px;
    }
    .kanban-mobile-activechips:empty {
        display: none;
    }
    .kmf-chip {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 11.5px;
        font-weight: 600;
        padding: 4px 10px;
        border-radius: 999px;
        background: #eef1fe;
        color: #2b47c4;
    }
    .kmf-chip button {
        background: none;
        border: 0;
        padding: 0;
        font-size: 14px;
        line-height: 1;
        color: inherit;
        opacity: 0.65;
        cursor: pointer;
    }

    /* A folha em si. */
    .kanban-mobile-sheet {
        position: fixed;
        inset: 0;
        z-index: 1045;          /* acima da barra de navegacao (1030) */
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
    .kanban-mobile-sheet[hidden] {
        display: none !important;
    }
    .kmf-scrim {
        position: absolute;
        inset: 0;
        background: rgba(12, 18, 16, 0.44);
        border: 0;
        padding: 0;
        cursor: pointer;
    }
    .kmf-panel {
        position: relative;
        background: #fff;
        border-radius: 17px 17px 0 0;
        max-height: 88vh;
        max-height: 88dvh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2);
    }
    .kmf-grip {
        width: 34px;
        height: 4px;
        border-radius: 99px;
        background: #e0e5e2;
        margin: 8px auto 0;
        flex: none;
    }
    .kmf-panel header {
        display: flex;
        align-items: center;
        padding: 9px 15px 8px;
        border-bottom: 1px solid #eef1ee;
        flex: none;
    }
    .kmf-panel header h4 {
        margin: 0;
        flex: 1;
        font-size: 15px;
        font-weight: 700;
    }
    .kmf-panel header button {
        background: none;
        border: 0;
        font-size: 21px;
        line-height: 1;
        color: #8b979b;
        cursor: pointer;
        min-width: 38px;
        min-height: 38px;
    }
    .kmf-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 13px 15px;
    }
    .kmf-fld {
        margin-bottom: 13px;
    }
    .kmf-fld label {
        display: block;
        font-size: 11px;
        font-weight: 700;
        color: #5c6a6f;
        margin-bottom: 5px;
    }
    /* Vence o "width:auto;min-width:140px" que os selects trazem inline. */
    .kmf-fld select {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px;
        font-size: 16px;
        border-radius: 10px;
    }
    .kmf-panel footer {
        flex: none;
        display: grid;
        grid-template-columns: 1fr 1.4fr;
        gap: 8px;
        padding: 10px 15px;
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid #eef1ee;
    }
    .kmf-panel footer .btn {
        min-height: 44px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 700;
    }

    /* ------------------------------------------------------------------
       CONTATOS -- a barra de exportar/importar sai
       ------------------------------------------------------------------
       Exportar planilha e importar leads nao sao tarefa de telefone, e
       "Adicionar Contato" ja vive no "+" da barra do topo. No desktop a barra
       continua inteira.
       ------------------------------------------------------------------ */

    #contacts-toolbar {
        display: none !important;
    }

    /* ------------------------------------------------------------------
       VISAO GERAL -- sem graficos
       ------------------------------------------------------------------
       Os graficos do Chart.js nao se leem em 360px. Somem so eles: o titulo
       do bloco, o total do periodo, a media por dia e as variacoes YoY/MoM
       continuam, porque sao o numero que a pessoa foi buscar. O funil, que e
       HTML e nao Chart.js, tambem fica.
       ------------------------------------------------------------------ */

    .chart-box {
        display: none !important;
    }
}

/* ============================================================================
   CONTATOS -- periodo fora, "+" junto da busca (2026-09-23)
   ============================================================================ */

@media (max-width: 767.98px) {


    /* A barra de acoes volta a existir, mas so para o "Adicionar Contato" --
       exportar planilha e importar leads continuam fora do celular. Ela nao
       ocupa espaco: o botao e movido para dentro da busca pelo
       contacts-mobile.js, e o que sobra aqui fica vazio. */
    #contacts-toolbar {
        display: none !important;
    }

    /* Busca do DataTables com o "+" no canto direito.
       Mesmas medidas da barra do Kanban (.kanban-mobile-filterbar): gap de 7px,
       campo de 42px de altura e cantos de 10px. As duas telas sao a mesma tarefa
       -- procurar alguem -- e nao havia razao para parecerem coisas diferentes. */
    .contacts-search-with-add {
        display: flex !important;
        align-items: center;
        gap: 7px;
        width: 100%;
        margin-bottom: 8px;
    }

    /* O DataTables embrulha o campo num <label> com o texto "Pesquisar:" antes
       dele. Esse texto e que encolhia a busca em relacao a do Kanban, que so tem
       o campo. O rotulo continua no DOM (leitor de tela o encontra pelo for/id),
       mas some da tela -- o lugar dele e o placeholder, que o contacts-mobile.js
       preenche. */
    /* Fora do fluxo: nao ocupa largura nem consome um gap do flex, entao o campo
       comeca exatamente na mesma coluna que o do Kanban. Continua no DOM e
       ligado ao campo pelo for/id, entao leitor de tela segue anunciando. */
    .contacts-search-with-add label.dt-search-label-oculto {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
    .contacts-search-with-add input[type="search"],
    .contacts-search-with-add input {
        flex: 1 1 auto;
        min-width: 0;
        width: 100% !important;
        min-height: 42px;
        font-size: 16px !important;   /* abaixo disto o iOS da zoom ao focar */
        border-radius: 10px;
    }

    /* O botao vira quadrado com o icone, sem o rotulo -- o "+" ja se explica
       e o nome roubaria a largura da busca. */
    .contacts-search-with-add #btn-add-contact {
        flex: 0 0 auto;
        width: 42px;
        min-height: 42px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        font-size: 0;      /* esconde o texto, preserva o icone */
    }
    .contacts-search-with-add #btn-add-contact .icon-14 {
        margin: 0 !important;
        width: 18px;
        height: 18px;
    }

    /* O "+" do topo so sai depois que o de baixo esta no lugar. Enquanto o JS
       nao mover (tabela ainda carregando, script que nao veio), a tela continua
       tendo como cadastrar. */
    body.contacts-plus-moved .mobile-add-contact {
        display: none !important;
    }
}

/* ============================================================================
   GUTTER E TRANSBORDO (2026-09-24)
   ============================================================================
   O .page-wrapper do tema tem padding: 25px, pensado para monitor. Numa tela de
   360px isso come 50px -- 14% da largura -- e o conteudo fica espremido no meio
   com sobra visivel de um lado. No celular 12px chega, e sao iguais nos dois
   lados, entao o card encaixa na tela.

   A trava de overflow-x existe porque um unico elemento mais largo que a tela faz
   a pagina inteira rolar de lado, e ai o conteudo parece deslocado: colado numa
   borda e sobrando na outra, que foi o relato.
   ============================================================================ */

@media (max-width: 767.98px) {

    /* O gutter lateral no celular ja e do tema e vale para todas as telas:
       #page-content:not(.no-padding) { padding: 15px !important } no app.all.css.
       Uma regra .page-wrapper daqui nao tem como venc\352-la (id + !important) --
       cheguei a escrever uma de 12px em 2026-09-24 que nunca aplicou, e o
       computed continuou 15px nas duas telas. Fica com os 15px do tema, que sao
       simetricos; a assimetria vinha da largura da coluna, nao do gutter. */

    /* Nada deve empurrar a pagina para os lados. Tabelas, o quadro do Kanban e
       as faixas que rolam tem o proprio container com overflow-x. */
    html,
    body {
        overflow-x: hidden;
    }

    /* Largura declarada inclui padding e borda -- senao um card com width:100%
       mais padding estoura o container e reaparece a assimetria. */
    #store-kanban-container .kanban-board-mobile .kanban-column,
    #store-kanban-container .kanban-board-mobile .kanban-column > .card,
    #contacts-datatable tr {
        box-sizing: border-box;
    }

    /* O corpo da etapa nao precisa do respiro do desktop. */
    #store-kanban-container .kanban-board-mobile .kanban-items-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}


/* Contatos com o mesmo respiro do Kanban (2026-09-24).
   No Kanban a barra de busca fica direto na pagina, a 15px da borda. Em Contatos
   ela nasce dentro de .card > .card-body, cujo padding a empurrava mais 16px de
   cada lado -- por isso o campo parecia menor. O padding lateral do card cai, e
   as duas telas passam a comecar na mesma linha vertical. */
@media (max-width: 767.98px) {
    #store-contacts-tab > .card > .card-body {
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
    }
    #store-contacts-tab > .card {
        border: 0;
        background: transparent;
        box-shadow: none;
    }
}


/* ============================================================================
   VENDAS NO CELULAR (2026-10-06) -- botao Vender, PDV e Pedido de Venda
   ============================================================================
   Tudo aqui fica dentro do breakpoint do celular. Os elementos novos nascem com
   d-md-none no HTML, entao no desktop nem aparecem; as classes/atributos que o
   JS liga (body.pos-mobile-pay, #page-content[data-step]) so tem efeito aqui.
   A distancia da barra de baixo de cada tela ate a navegacao vem do
   assets/js/sales-mobile.js, que mede a barra que estiver na tela.
   ============================================================================ */

@media (max-width: 767.98px) {

    /* ------------------------------------------------------------------
       BOTAO VENDER (includes/mobile_sales_fab.php)
       ------------------------------------------------------------------ */
    .crm-sales-fab {
        position: fixed;
        right: 16px;
        bottom: calc(68px + env(safe-area-inset-bottom, 0px));
        z-index: 1032;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: 0;
        padding: 0;
        background: #4c6ef5;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 16px rgba(76, 110, 245, 0.4);
        -webkit-tap-highlight-color: transparent;
    }
    .crm-sales-fab:hover,
    .crm-sales-fab:focus {
        color: #fff;
        text-decoration: none;
    }
    .crm-sales-fab .icon {
        width: 24px;
        height: 24px;
    }
    .crm-sales-fab-close,
    .crm-sales-fab-wrap.is-open .crm-sales-fab-open {
        display: none;
    }
    .crm-sales-fab-open,
    .crm-sales-fab-wrap.is-open .crm-sales-fab-close {
        display: inline-flex;
    }

    .crm-sales-fab-scrim {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1031;          /* cobre a barra de navegacao (1030) */
        border: 0;
        padding: 0;
        background: rgba(21, 25, 27, 0.45);
    }
    .crm-sales-fab-options {
        display: none;
        position: fixed;
        right: 20px;
        bottom: calc(140px + env(safe-area-inset-bottom, 0px));
        z-index: 1032;
        flex-direction: column;
        align-items: flex-end;
        gap: 14px;
    }
    .crm-sales-fab-wrap.is-open .crm-sales-fab-scrim {
        display: block;
    }
    .crm-sales-fab-wrap.is-open .crm-sales-fab-options {
        display: flex;
    }
    .crm-sales-fab-option {
        display: flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
    }
    .crm-sales-fab-option:hover,
    .crm-sales-fab-option:focus {
        text-decoration: none;
    }
    .crm-sales-fab-label {
        background: #fff;
        border-radius: 10px;
        padding: 8px 12px;
        text-align: right;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        line-height: 1.25;
    }
    .crm-sales-fab-label b {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: #15191b;
    }
    .crm-sales-fab-label small {
        display: block;
        font-size: 12px;
        color: #5c6a6f;
    }
    .crm-sales-fab-mini {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #fff;
        color: #4c6ef5;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    .crm-sales-fab-mini .icon {
        width: 22px;
        height: 22px;
    }

    /* Onde o botao atrapalha: modal aberto (o #ajaxModal vira folha), filtros
       do Kanban abertos e conversa aberta no Ao Vivo -- ali ele ficaria em cima
       do campo de digitar. */
    body.modal-open .crm-sales-fab,
    body.modal-open .crm-sales-fab-wrap,
    body:has(.kanban-mobile-sheet:not([hidden])) .crm-sales-fab,
    body:has(.kanban-mobile-sheet:not([hidden])) .crm-sales-fab-wrap,
    body:has(#chatActiveConversation.visible) .crm-sales-fab,
    body:has(#chatActiveConversation.visible) .crm-sales-fab-wrap {
        display: none;
    }

    /* ------------------------------------------------------------------
       BARRA DE BAIXO DAS TELAS DE VENDA (PDV e Pedido de Venda)
       ------------------------------------------------------------------ */
    .pos-mobile-bar,
    .so-mobile-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;              /* o sales-mobile.js sobe ate a navegacao */
        z-index: 1029;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        background: #fff;
        border-top: 1px solid #e0e5e2;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
    }
    .pos-mobile-bar.sem-nav,
    .so-mobile-bar.sem-nav {
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }
    .pos-mobile-total,
    .so-mobile-total {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        line-height: 1.15;
    }
    .pos-mobile-total small,
    .so-mobile-total small {
        font-size: 12px;
        color: #5c6a6f;
    }
    .pos-mobile-total b,
    .so-mobile-total b {
        font-size: 20px;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }
    .pos-mobile-bar .btn,
    .so-mobile-bar .btn {
        min-height: 48px;
        font-size: 16px;
        font-weight: 600;
        padding: 0 18px;
        border-radius: 10px;
        flex: 0 0 auto;
    }
    .pos-mobile-bar .pos-mobile-back,
    .so-mobile-bar .so-mobile-prev {
        width: 48px;
        padding: 0;
        align-items: center;
        justify-content: center;
    }
    .so-mobile-bar .so-mobile-prev {
        display: inline-flex;
    }

    /* Conteudo nao termina atras da barra + navegacao. */
    .erp_pos-page .main-scrollable-page,
    .erp_sales_order-page .main-scrollable-page {
        padding-bottom: calc(var(--sales-bar-space, 140px) + 16px);
    }

    /* Campos: 16px impede o zoom do iOS ao focar; 44px e alvo de dedo. */
    .erp_pos-page #page-content .form-control,
    .erp_pos-page #page-content .form-select,
    .erp_sales_order-page #page-content .form-control,
    .erp_sales_order-page #page-content .form-select {
        font-size: 16px;
        min-height: 44px;
    }
    .erp_pos-page #page-content .input-group .btn,
    .erp_sales_order-page #page-content .input-group .btn {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .erp_pos-page #page-content .list-group-item,
    .erp_sales_order-page #page-content .list-group-item {
        min-height: 48px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* ------------------------------------------------------------------
       PDV (erp/pos/index.php) -- venda e pagamento em duas telas
       ------------------------------------------------------------------ */
    .erp_pos-page .pos-mobile-actions .btn {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .erp_pos-page .pos-mobile-actions .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    body.erp_pos-page:not(.pos-mobile-pay) .pos-col-pay,
    body.erp_pos-page.pos-mobile-pay .pos-col-sale {
        display: none;
    }

    /* Tela de venda: total + "Pagamento". Tela de pagamento: voltar + total +
       "Fechar pedido" (o da barra; o do cartao some para nao ter dois). */
    .pos-mobile-bar .pos-mobile-back,
    .pos-mobile-bar .pos-mobile-finish,
    body.pos-mobile-pay .pos-mobile-bar .pos-mobile-go-pay,
    body.pos-mobile-pay #pos-close-order {
        display: none;
    }
    body.pos-mobile-pay .pos-mobile-bar .pos-mobile-back {
        display: inline-flex;
    }
    body.pos-mobile-pay .pos-mobile-bar .pos-mobile-finish {
        display: block;
    }

    /* Produto escolhido: vira folha que sobe de baixo, com o fundo escurecido.
       O jQuery liga/desliga com show()/hide(); aqui so muda onde ele aparece. */
    .erp_pos-page #pos-selected-product {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1046;
        margin: 0 !important;
        border: 0;
        border-radius: 18px 18px 0 0;
        max-height: 85vh;
        overflow-y: auto;
        box-shadow: 0 0 0 100vmax rgba(21, 25, 27, 0.45);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .erp_pos-page #pos-selected-product .btn {
        min-height: 48px;
        font-size: 16px;
    }
    .erp_pos-page #pos-selected-product .pos-discount-type {
        min-width: 48px;
        min-height: 44px;
    }

    /* Carrinho: -, + e x com alvo de dedo. */
    .erp_pos-page #pos-cart > div {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    .erp_pos-page #pos-cart .btn {
        min-width: 40px;
        min-height: 40px;
    }
    .erp_pos-page .pos-order-discount-type {
        min-height: 44px;
    }

    /* ------------------------------------------------------------------
       PEDIDO DE VENDA (erp/sales_order/index.php) -- 4 passos
       ------------------------------------------------------------------ */
    .erp_sales_order-page #page-content > .d-flex:first-child {
        flex-wrap: wrap;
        gap: 8px;
    }

    .so-mobile-steps {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        background: #fff;
        border: 1px solid #e0e5e2;
        border-radius: 12px;
        overflow: hidden;
        margin-bottom: 8px;
    }
    .so-mobile-step {
        border: 0;
        border-bottom: 2px solid transparent;
        background: none;
        padding: 10px 2px 9px;
        min-height: 56px;
        font-size: 12px;
        font-weight: 600;
        color: #8b979b;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
    }
    .so-mobile-step i {
        font-style: normal;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #eef1ee;
        color: #5c6a6f;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11.5px;
    }
    .so-mobile-step.active {
        color: #4c6ef5;
        border-bottom-color: #4c6ef5;
    }
    .so-mobile-step.active i {
        background: #4c6ef5;
        color: #fff;
    }

    /* Um passo por vez. */
    #page-content[data-step="1"] [data-so-step]:not([data-so-step="1"]),
    #page-content[data-step="2"] [data-so-step]:not([data-so-step="2"]),
    #page-content[data-step="3"] [data-so-step]:not([data-so-step="3"]),
    #page-content[data-step="4"] [data-so-step]:not([data-so-step="4"]) {
        display: none;
    }

    /* Fechar Pedido fica na barra; o cartao de acoes guarda Salvar e Cancelar,
       empilhados na largura toda. */
    .erp_sales_order-page #so-close-order {
        display: none;
    }
    .erp_sales_order-page .so-actions-card .card-body {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .erp_sales_order-page .so-actions-card .btn {
        width: 100%;
        min-height: 48px;
        margin: 0 !important;
    }

    /* Grade de itens -> um cartao por item. Ordem das colunas fixa em
       renderItemsTable: 1 SKU, 2 descricao, 3 unidade, 4 valor unit., 5 qtd,
       6 desconto %, 7 total, 8 lixeira. Mexer na ordem de la desalinha aqui. */
    .erp_sales_order-page #so-items-table thead {
        display: none;
    }
    .erp_sales_order-page #so-items-table,
    .erp_sales_order-page #so-items-table tbody {
        display: block;
        width: 100%;
    }
    .erp_sales_order-page #page-content .table-responsive {
        overflow: visible;
    }
    .erp_sales_order-page #so-items-body tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)) 40px;
        column-gap: 8px;
        row-gap: 4px;
        padding: 10px 0;
        border-bottom: 1px solid #e0e5e2;
    }
    .erp_sales_order-page #so-items-body td {
        display: block;
        border: 0;
        padding: 0;
        text-align: left !important;
        min-width: 0;
    }
    .erp_sales_order-page #so-items-body tr[data-item-id] td:nth-child(2) {
        grid-column: 1 / 4;
        grid-row: 1;
        font-size: 14px;
        font-weight: 600;
    }
    .erp_sales_order-page #so-items-body tr[data-item-id] td:nth-child(8) {
        grid-column: 4;
        grid-row: 1;
    }
    .erp_sales_order-page #so-items-body tr[data-item-id] td:nth-child(8) a {
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .erp_sales_order-page #so-items-body tr[data-item-id] td:nth-child(1) { grid-column: 1; grid-row: 2; }
    .erp_sales_order-page #so-items-body tr[data-item-id] td:nth-child(3) { grid-column: 2; grid-row: 2; }
    .erp_sales_order-page #so-items-body tr[data-item-id] td:nth-child(4) { grid-column: 3; grid-row: 2; }
    .erp_sales_order-page #so-items-body tr[data-item-id] td:nth-child(5) { grid-column: 1; grid-row: 3; }
    .erp_sales_order-page #so-items-body tr[data-item-id] td:nth-child(6) { grid-column: 2; grid-row: 3; }
    .erp_sales_order-page #so-items-body tr[data-item-id] td:nth-child(7) {
        grid-column: 3 / 5;
        grid-row: 3;
        align-self: end;
        text-align: right !important;
        font-size: 15px;
        padding-bottom: 10px;
    }
    .erp_sales_order-page #so-items-body td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 11.5px;
        color: #5c6a6f;
        margin-bottom: 2px;
    }
    .erp_sales_order-page #so-items-body td input {
        min-width: 0 !important;
        width: 100%;
    }

    /* Linha de entrada: so o campo de SKU/codigo, na largura toda. */
    .erp_sales_order-page #so-items-body tr#so-entry-row {
        grid-template-columns: minmax(0, 1fr);
        border-bottom: 0;
    }
    .erp_sales_order-page #so-items-body tr#so-entry-row td:not(:first-child) {
        display: none;
    }
}