/* Consolidado de mobile-final-consistency.css — v2.105 */
/* Meu Palcco — correção final e centralizada de UX/UI mobile.
   Carregado por último para impedir regressões causadas por regras legadas. */

/* Abas precisam parecer interativas também no desktop. */
.company-form-tablist,
.crm-edit-tablist {
    border: 1px solid rgba(126, 48, 225, .18) !important;
    background: linear-gradient(180deg, #fbf8ff 0%, #f7f1ff 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88) !important;
}

.company-form-tab,
.crm-edit-tab {
    color: #5f5068 !important;
    opacity: 1 !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

.company-form-tab:hover,
.crm-edit-tab:hover {
    background: rgba(126, 48, 225, .08) !important;
    color: #5c20b7 !important;
}

.company-form-tab.is-active,
.company-form-tab[aria-selected="true"],
.crm-edit-tab.is-active,
.crm-edit-tab[aria-selected="true"] {
    background: linear-gradient(135deg, #f26a2e 0%, #7e30e1 100%) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(126, 48, 225, .22) !important;
}

/* Botões de gravar devem exibir somente texto em qualquer tamanho de tela. */
button[type="submit"] .ui-button-icon,
button[type="submit"] .button-icon,
button[data-submit-label] .ui-button-icon,
button[data-submit-label] .button-icon,
.form-submit-actions .ui-button-icon,
.form-submit-actions .button-icon,
[data-crm-edit-primary] .ui-button-icon,
[data-crm-edit-primary] .button-icon {
    display: none !important;
}

button[type="submit"].ui-button-with-icon,
button[data-submit-label].ui-button-with-icon,
.form-submit-actions .ui-button-with-icon {
    gap: 0 !important;
}

@media (max-width: 820px) {
    /* A barra de ações de cada página fica sempre alinhada à direita. */
    .page-heading,
    .opportunity-heading,
    .module-heading,
    .list-heading,
    .page-toolbar,
    .toolbar,
    .table-toolbar {
        align-items: flex-start !important;
    }

    .page-heading .heading-actions,
    .opportunity-heading .heading-actions,
    .module-heading .heading-actions,
    .list-heading .heading-actions,
    .page-toolbar__actions,
    .toolbar-actions,
    .table-actions,
    .filter-actions {
        margin-left: auto !important;
        justify-content: flex-end !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    /* Cadastro de contratante: abas compactas, visíveis e sem aparência desabilitada. */
    .company-form-tabs,
    .crm-edit-tabs {
        width: 100% !important;
        min-width: 0 !important;
    }

    .company-form-tablist,
    .crm-edit-tablist {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: 100% !important;
        gap: 4px !important;
        padding: 5px !important;
        border-radius: 17px !important;
        overflow: hidden !important;
    }

    .company-form-tab,
    .crm-edit-tab {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
        width: 100% !important;
        min-height: 48px !important;
        padding: 7px 5px !important;
        border-radius: 12px !important;
        font-size: clamp(11px, 3.2vw, 13px) !important;
        line-height: 1.15 !important;
        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
    }

    .company-form-tablist:has(> :nth-child(2):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Telefones: DDI e número na mesma linha, sem sobreposição de labels ou inputs. */
    .form-field .phone-ddi-control,
    .phone-ddi-control {
        display: grid !important;
        grid-template-columns: 118px minmax(0, 1fr) !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 52px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        overflow: visible !important;
    }

    .form-field .phone-ddi-select,
    .form-field .phone-ddi-control input,
    .phone-ddi-control .phone-ddi-select,
    .phone-ddi-control input {
        position: static !important;
        inset: auto !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 52px !important;
        min-height: 52px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .form-field .phone-ddi-select,
    .phone-ddi-control .phone-ddi-select {
        padding-left: 10px !important;
        padding-right: 34px !important;
        font-size: 15px !important;
    }

    .form-field .phone-ddi-control input,
    .phone-ddi-control input {
        padding-inline: 13px !important;
        font-size: 16px !important;
    }

    /* Cards oriundos de tabelas: somente nome e ações no mobile. */
    .responsive-table tbody tr,
    .accounts-table tbody tr,
    .cash-flow-table tbody tr {
        position: relative !important;
        display: block !important;
        min-height: 76px !important;
        padding: 15px !important;
        border-radius: 18px !important;
        overflow: visible !important;
    }

    .responsive-table tbody tr > td,
    .accounts-table tbody tr > td,
    .cash-flow-table tbody tr > td {
        display: none !important;
    }

    .responsive-table tbody tr > td.is-primary-field,
    .responsive-table tbody tr > td:first-child:not(.bulk-select-cell):not(.actions),
    .responsive-table tbody tr > td.bulk-select-cell + td,
    .accounts-table tbody tr > td.is-primary-field,
    .accounts-table tbody tr > td:first-child:not(.bulk-select-cell):not(.actions),
    .accounts-table tbody tr > td.bulk-select-cell + td,
    .cash-flow-table tbody tr > td.is-primary-field,
    .cash-flow-table tbody tr > td:first-child:not(.bulk-select-cell):not(.actions),
    .cash-flow-table tbody tr > td.bulk-select-cell + td {
        display: block !important;
        min-height: 44px !important;
        padding: 4px 132px 4px 0 !important;
        border: 0 !important;
        text-align: left !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        overflow-wrap: normal !important;
    }

    .responsive-table tbody tr > td.is-primary-field::before,
    .responsive-table tbody tr > td:first-child:not(.bulk-select-cell):not(.actions)::before,
    .responsive-table tbody tr > td.bulk-select-cell + td::before,
    .accounts-table tbody tr > td.is-primary-field::before,
    .accounts-table tbody tr > td:first-child:not(.bulk-select-cell):not(.actions)::before,
    .accounts-table tbody tr > td.bulk-select-cell + td::before,
    .cash-flow-table tbody tr > td.is-primary-field::before,
    .cash-flow-table tbody tr > td:first-child:not(.bulk-select-cell):not(.actions)::before,
    .cash-flow-table tbody tr > td.bulk-select-cell + td::before {
        display: none !important;
        content: none !important;
    }

    .responsive-table tbody tr > td.actions,
    .responsive-table tbody tr > td[data-label="Ações"],
    .accounts-table tbody tr > td.actions,
    .accounts-table tbody tr > td[data-label="Ações"],
    .cash-flow-table tbody tr > td.actions,
    .cash-flow-table tbody tr > td[data-label="Ações"] {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        z-index: 3 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        width: auto !important;
        max-width: 126px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        gap: 6px !important;
        background: transparent !important;
    }

    .responsive-table tbody tr > td.actions::before,
    .responsive-table tbody tr > td[data-label="Ações"]::before,
    .accounts-table tbody tr > td.actions::before,
    .accounts-table tbody tr > td[data-label="Ações"]::before,
    .cash-flow-table tbody tr > td.actions::before,
    .cash-flow-table tbody tr > td[data-label="Ações"]::before {
        display: none !important;
        content: none !important;
    }

    .responsive-table tbody tr > td.bulk-select-cell,
    .accounts-table tbody tr > td.bulk-select-cell,
    .cash-flow-table tbody tr > td.bulk-select-cell,
    .responsive-table tbody tr > td[data-label="Selecionar"],
    .accounts-table tbody tr > td[data-label="Selecionar"],
    .cash-flow-table tbody tr > td[data-label="Selecionar"] {
        display: none !important;
    }

    .responsive-table tbody td.actions .icon-action,
    .responsive-table tbody td.actions .button,
    .accounts-table tbody td.actions .icon-action,
    .accounts-table tbody td.actions .button,
    .cash-flow-table tbody td.actions .icon-action,
    .cash-flow-table tbody td.actions .button {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        border-radius: 12px !important;
    }

    /* Nas barras superiores mobile, todos os botões operacionais ficam no canto direito. */
    .heading-actions,
    .page-actions,
    .list-actions,
    .module-actions,
    .opportunity-heading .heading-actions {
        display: flex !important;
        width: 100% !important;
        margin-left: auto !important;
        justify-content: flex-end !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }
}

@media (max-width: 390px) {
    .form-field .phone-ddi-control,
    .phone-ddi-control {
        grid-template-columns: 106px minmax(0, 1fr) !important;
        gap: 6px !important;
    }

    .responsive-table tbody tr > td.is-primary-field,
    .responsive-table tbody tr > td:first-child:not(.bulk-select-cell):not(.actions),
    .responsive-table tbody tr > td.bulk-select-cell + td,
    .accounts-table tbody tr > td.is-primary-field,
    .accounts-table tbody tr > td:first-child:not(.bulk-select-cell):not(.actions),
    .accounts-table tbody tr > td.bulk-select-cell + td,
    .cash-flow-table tbody tr > td.is-primary-field,
    .cash-flow-table tbody tr > td:first-child:not(.bulk-select-cell):not(.actions),
    .cash-flow-table tbody tr > td.bulk-select-cell + td {
        padding-right: 116px !important;
        font-size: 16px !important;
    }
}

/* Ajustes móveis consolidados — 2026-07-17 */
@media (max-width: 820px) {
    /* Abas da interna do evento: sempre em uma única linha, compactas e claramente ativas. */
    body:not(.app-modal-body) .crm-event-edit-layout .crm-edit-tablist,
    body:not(.app-modal-body) .crm-edit-tabs .crm-edit-tablist {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 4px !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    body:not(.app-modal-body) .crm-event-edit-layout .crm-edit-tab,
    body:not(.app-modal-body) .crm-edit-tabs .crm-edit-tab {
        min-height: 44px !important;
        height: 44px !important;
        padding: 5px 3px !important;
        font-size: clamp(10px, 2.75vw, 12px) !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        border-radius: 11px !important;
    }

    /* Todas as barras de ação ficam agrupadas no canto direito. */
    body .page-heading .heading-actions,
    body .opportunity-heading .heading-actions,
    body .page-heading--actions-only .heading-actions,
    body .services-heading-actions,
    body .accounts-heading-actions {
        display: flex !important;
        width: 100% !important;
        margin: 0 0 0 auto !important;
        justify-content: flex-end !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    body .page-heading .heading-actions > *,
    body .opportunity-heading .heading-actions > *,
    body .services-heading-actions > *,
    body .accounts-heading-actions > * {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    /* Cards de tabela: esconder checkbox e mostrar somente a coluna principal e ações. */
    .responsive-table tbody tr > td.bulk-select-column,
    .accounts-table tbody tr > td.bulk-select-column,
    .cash-flow-table tbody tr > td.bulk-select-column,
    .responsive-table tbody tr > td[data-label="Selecionar"],
    .accounts-table tbody tr > td[data-label="Selecionar"],
    .cash-flow-table tbody tr > td[data-label="Selecionar"] {
        display: none !important;
    }

    .responsive-table tbody tr > td.is-primary-field,
    .accounts-table tbody tr > td.is-primary-field,
    .cash-flow-table tbody tr > td.is-primary-field {
        display: block !important;
        padding: 5px 146px 5px 0 !important;
        min-height: 46px !important;
    }

    /* Espaço proporcional ao número de ações para evitar botões fora do card. */
    .responsive-table tbody tr:has(td.actions .icon-action:nth-child(3)),
    .accounts-table tbody tr:has(td.actions .icon-action:nth-child(3)),
    .cash-flow-table tbody tr:has(td.actions .icon-action:nth-child(3)) {
        min-height: 84px !important;
    }

    .responsive-table tbody tr:has(td.actions .icon-action:nth-child(3)) > td.is-primary-field,
    .accounts-table tbody tr:has(td.actions .icon-action:nth-child(3)) > td.is-primary-field,
    .cash-flow-table tbody tr:has(td.actions .icon-action:nth-child(3)) > td.is-primary-field {
        padding-right: 154px !important;
    }

    .responsive-table tbody tr:has(td.actions .icon-action:nth-child(4)) > td.is-primary-field,
    .accounts-table tbody tr:has(td.actions .icon-action:nth-child(4)) > td.is-primary-field,
    .cash-flow-table tbody tr:has(td.actions .icon-action:nth-child(4)) > td.is-primary-field {
        padding-right: 202px !important;
    }

    .responsive-table tbody tr > td.actions,
    .responsive-table tbody tr > td[data-label="Ações"],
    .accounts-table tbody tr > td.actions,
    .accounts-table tbody tr > td[data-label="Ações"],
    .cash-flow-table tbody tr > td.actions,
    .cash-flow-table tbody tr > td[data-label="Ações"] {
        right: 10px !important;
        top: 10px !important;
        max-width: none !important;
        width: auto !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }

    .responsive-table tbody td.actions > div,
    .accounts-table tbody td.actions > div,
    .cash-flow-table tbody td.actions > div {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }

    /* Células principais específicas, caso algum módulo não tenha classe explícita. */
    .services-table tbody td[data-label="Serviço"],
    .accounts-table tbody td[data-label="Conta"],
    .cash-flow-table tbody td[data-label="Contratante"] {
        display: block !important;
        padding: 5px 154px 5px 0 !important;
        border: 0 !important;
        text-align: left !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        overflow-wrap: normal !important;
    }

    .services-table tbody td[data-label="Serviço"]::before,
    .accounts-table tbody td[data-label="Conta"]::before,
    .cash-flow-table tbody td[data-label="Contratante"]::before {
        display: none !important;
        content: none !important;
    }
}

@media (max-width: 390px) {
    body:not(.app-modal-body) .crm-event-edit-layout .crm-edit-tab,
    body:not(.app-modal-body) .crm-edit-tabs .crm-edit-tab {
        font-size: 10px !important;
        letter-spacing: -.1px !important;
    }

    .responsive-table tbody tr > td.is-primary-field,
    .accounts-table tbody tr > td.is-primary-field,
    .cash-flow-table tbody tr > td.is-primary-field,
    .services-table tbody td[data-label="Serviço"],
    .accounts-table tbody td[data-label="Conta"],
    .cash-flow-table tbody td[data-label="Contratante"] {
        font-size: 15px !important;
    }
}


/* Consolidado de mobile-create-pages.css — v2.105 */
@media (max-width: 767px) {
    /* Ações de cabeçalho sempre agrupadas à direita, sem distribuição artificial. */
    body .page-heading,
    body .compact-heading,
    body .opportunity-heading,
    body .services-heading,
    body .accounts-heading {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
    }

    body .page-heading .heading-actions,
    body .opportunity-heading .heading-actions,
    body .services-heading-actions,
    body .accounts-heading-actions,
    body .module-heading .heading-actions,
    body .list-heading .heading-actions {
        width: auto !important;
        max-width: 100% !important;
        margin-left: auto !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
    }

    body .page-heading .heading-actions > *,
    body .opportunity-heading .heading-actions > *,
    body .services-heading-actions > *,
    body .accounts-heading-actions > * {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    /* A coluna principal ocupa toda a primeira linha do card. */
    body .responsive-table tbody tr > td.is-primary-field,
    body .responsive-table tbody tr > td:first-child:not(.bulk-select-cell):not(.actions),
    body .responsive-table tbody tr > td.bulk-select-cell + td,
    body .services-table tbody td[data-label="Serviço"],
    body .accounts-table tbody td[data-label="Conta"],
    body .cash-flow-table tbody td[data-label="Contratante"] {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding-right: 132px !important;
        grid-column: 1 / -1 !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
    }

    /* Seleção em lote continua no desktop, mas não polui os cards mobile. */
    body .responsive-table thead .bulk-select-column,
    body .responsive-table tbody .bulk-select-cell,
    body .responsive-table tbody td[data-label="Selecionar"],
    body .services-table tbody td[data-label="Selecionar"],
    body .accounts-table tbody td[data-label="Selecionar"],
    body .cash-flow-table tbody td[data-label="Selecionar"],
    body .bulk-selection-bar {
        display: none !important;
    }

    /* Ações permanecem no canto superior direito do card. */
    body .responsive-table tbody tr > td.actions,
    body .responsive-table tbody tr > td[data-label="Ações"],
    body .services-table tbody tr > td[data-label="Ações"],
    body .accounts-table tbody tr > td[data-label="Ações"],
    body .cash-flow-table tbody tr > td[data-label="Ações"] {
        position: absolute !important;
        top: 14px !important;
        right: 14px !important;
        width: auto !important;
        max-width: 128px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 8px !important;
        border: 0 !important;
        background: transparent !important;
    }

    /* Rotas de criação que reutilizam formulários de modal são exibidas como página interna. */
    html.mobile-create-page,
    body.mobile-create-page {
        overflow: auto !important;
    }

    body.mobile-create-page .services-page,
    body.mobile-create-page .accounts-page {
        display: none !important;
    }

    body.mobile-create-page .modal.is-mobile-create-page {
        position: static !important;
        inset: auto !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        padding: 20px 16px 36px !important;
        background: transparent !important;
        overflow: visible !important;
        z-index: auto !important;
    }

    body.mobile-create-page .accounts-modal.is-mobile-create-page .modal-backdrop,
    body.mobile-create-page .accounts-modal.is-mobile-create-page [data-modal-close] {
        display: none !important;
    }

    body.mobile-create-page .modal.is-mobile-create-page .modal-card {
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        border-radius: 24px !important;
        overflow: visible !important;
        box-shadow: 0 18px 48px rgba(63, 33, 91, .12) !important;
    }

    body.mobile-create-page .modal.is-mobile-create-page .modal-card::before {
        content: "";
        display: block;
        width: 44px;
        height: 4px;
        margin: 12px auto 4px;
        border-radius: 999px;
        background: #d8c9ea;
    }
}


/* Consolidado de mobile-actions-right.css — v2.105 */
/* Meu Palcco — alinhamento global das ações de página no mobile.
   Toda barra de ações principal fica agrupada no canto direito, sem space-between. */
@media (max-width: 820px) {
    /* Contêineres principais de ações das páginas. */
    .page-heading,
    header.page-heading,
    section.page-heading,
    .compact-heading,
    .opportunity-heading,
    .services-heading,
    .accounts-heading,
    .module-heading,
    .list-heading,
    .page-toolbar,
    .table-toolbar,
    .toolbar,
    .resource-toolbar,
    .kanban-toolbar {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 8px !important;
    }

    /* Grupos de botões: nunca distribuir entre as extremidades. */
    .page-heading > .heading-actions,
    .page-heading .heading-actions,
    .opportunity-heading > .heading-actions,
    .opportunity-heading .heading-actions,
    .services-heading-actions,
    .accounts-heading-actions,
    .module-heading .heading-actions,
    .list-heading .heading-actions,
    .page-toolbar__actions,
    .toolbar-actions,
    .table-actions,
    .resource-actions,
    .kanban-actions,
    .page-actions,
    .actions-toolbar,
    .header-actions,
    .filters-heading-actions {
        display: flex !important;
        flex: 0 0 auto !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        align-content: center !important;
        flex-wrap: nowrap !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 0 0 auto !important;
        padding: 0 !important;
        gap: 8px !important;
    }

    /* Impede regras antigas de space-between nos cabeçalhos de módulos. */
    .page-heading--actions-only,
    .page-heading--actions-only .heading-actions,
    .opportunity-kanban-page .page-heading,
    .services-page .page-heading,
    .accounts-page .page-heading {
        justify-content: flex-end !important;
    }

    /* Botões continuam compactos e não ocupam a largura disponível. */
    .page-heading .button,
    .page-heading button,
    .page-heading a.button,
    .page-toolbar .button,
    .table-toolbar .button,
    .toolbar .button {
        flex: 0 0 auto !important;
        margin-inline: 0 !important;
    }

    /* Quando houver título no mesmo cabeçalho, ações continuam à direita. */
    .page-heading > :not(.heading-actions):not(.accounts-heading-actions):not(.services-heading-actions),
    .module-heading > :not(.heading-actions),
    .list-heading > :not(.heading-actions) {
        min-width: 0 !important;
    }

    /* Barras específicas que possuem Novo / Importar / Filtrar. */
    .opportunity-kanban-page .heading-actions,
    .resources-page .heading-actions,
    .services-page .services-heading-actions,
    .accounts-page .accounts-heading-actions,
    body[data-page] .page-heading .heading-actions {
        margin-left: auto !important;
        margin-right: 0 !important;
        justify-content: flex-end !important;
    }
}


/* Consolidado de mobile-ui-system-final.css — v2.105 */
/* Meu Palcco — sistema final de UI mobile.
   Esta camada deve permanecer por último para neutralizar regras legadas conflitantes. */
@media (max-width: 820px) {
    /* 1. Toda barra de ações de página fica agrupada à direita. */
    .page-heading,
    .compact-heading,
    .opportunity-heading,
    .services-heading,
    .accounts-heading,
    .module-heading,
    .list-heading,
    .page-toolbar,
    .table-toolbar,
    .resource-toolbar,
    .kanban-toolbar,
    .toolbar {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: 100% !important;
        gap: 8px !important;
    }

    .heading-actions,
    .services-heading-actions,
    .accounts-heading-actions,
    .page-toolbar__actions,
    .toolbar-actions,
    .table-actions,
    .resource-actions,
    .kanban-actions,
    .page-actions,
    .actions-toolbar,
    .filters-heading-actions {
        display: flex !important;
        flex: 0 0 auto !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: auto !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        gap: 8px !important;
    }

    .heading-actions > *,
    .services-heading-actions > *,
    .accounts-heading-actions > *,
    .page-toolbar__actions > *,
    .toolbar-actions > *,
    .table-actions > *,
    .resource-actions > *,
    .kanban-actions > *,
    .page-actions > * {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    /* 2. Cards de tabelas: checkbox oculto, coluna principal e ações. */
    .responsive-table tbody tr,
    .services-table tbody tr,
    .accounts-table tbody tr,
    .cash-flow-table tbody tr {
        position: relative !important;
        display: block !important;
        min-height: 108px !important;
        padding: 18px !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .responsive-table tbody tr > td,
    .services-table tbody tr > td,
    .accounts-table tbody tr > td,
    .cash-flow-table tbody tr > td {
        display: none !important;
    }

    .responsive-table tbody tr > td.bulk-select-column,
    .responsive-table tbody tr > td.bulk-select-cell,
    .responsive-table tbody tr > td[data-label="Selecionar"],
    .services-table tbody tr > td.bulk-select-column,
    .services-table tbody tr > td.bulk-select-cell,
    .services-table tbody tr > td[data-label="Selecionar"],
    .accounts-table tbody tr > td.bulk-select-column,
    .accounts-table tbody tr > td.bulk-select-cell,
    .accounts-table tbody tr > td[data-label="Selecionar"],
    .cash-flow-table tbody tr > td.bulk-select-column,
    .cash-flow-table tbody tr > td.bulk-select-cell,
    .cash-flow-table tbody tr > td[data-label="Selecionar"] {
        display: none !important;
    }

    .responsive-table tbody tr > td.is-primary-field,
    .services-table tbody tr > td.is-primary-field,
    .accounts-table tbody tr > td.is-primary-field,
    .cash-flow-table tbody tr > td.is-primary-field,
    .responsive-table tbody tr > td[data-mobile-primary="true"],
    .services-table tbody tr > td[data-mobile-primary="true"],
    .accounts-table tbody tr > td[data-mobile-primary="true"],
    .cash-flow-table tbody tr > td[data-mobile-primary="true"] {
        display: block !important;
        width: 100% !important;
        min-height: 58px !important;
        padding: 54px 0 4px !important;
        border: 0 !important;
        text-align: left !important;
        font-size: 18px !important;
        font-weight: 750 !important;
        line-height: 1.28 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    .responsive-table tbody tr > td.is-primary-field::before,
    .services-table tbody tr > td.is-primary-field::before,
    .accounts-table tbody tr > td.is-primary-field::before,
    .cash-flow-table tbody tr > td.is-primary-field::before,
    [data-mobile-primary="true"]::before {
        display: none !important;
        content: none !important;
    }

    .responsive-table tbody tr > td.actions,
    .responsive-table tbody tr > td[data-label="Ações"],
    .services-table tbody tr > td.actions,
    .services-table tbody tr > td[data-label="Ações"],
    .accounts-table tbody tr > td.actions,
    .accounts-table tbody tr > td[data-label="Ações"],
    .cash-flow-table tbody tr > td.actions,
    .cash-flow-table tbody tr > td[data-label="Ações"] {
        position: absolute !important;
        top: 14px !important;
        right: 14px !important;
        z-index: 4 !important;
        display: flex !important;
        width: auto !important;
        max-width: calc(100% - 28px) !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 7px !important;
    }

    .responsive-table tbody tr > td.actions::before,
    .responsive-table tbody tr > td[data-label="Ações"]::before,
    .services-table tbody tr > td.actions::before,
    .services-table tbody tr > td[data-label="Ações"]::before,
    .accounts-table tbody tr > td.actions::before,
    .accounts-table tbody tr > td[data-label="Ações"]::before,
    .cash-flow-table tbody tr > td.actions::before,
    .cash-flow-table tbody tr > td[data-label="Ações"]::before {
        display: none !important;
        content: none !important;
    }

    /* Nome das contas nunca quebra letra por letra. */
    .accounts-table .is-primary-field,
    .accounts-table .account-name,
    .account-card__name,
    .account-name {
        min-width: 0 !important;
        white-space: normal !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        letter-spacing: normal !important;
    }

    /* 3. Cards mais compactos e estatísticas sem altura excessiva. */
    .services-page .stats-grid,
    .services-page .summary-grid,
    .dashboard-stat-grid,
    .metric-grid {
        gap: 10px !important;
    }

    .services-page .stat-card,
    .services-page .summary-card,
    .metric-card {
        min-height: 0 !important;
        padding: 16px 18px !important;
    }

    /* 4. Botões de contas seguem o mesmo padrão compacto das demais páginas. */
    .accounts-page .accounts-heading-actions,
    .accounts-page .heading-actions {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
        gap: 8px !important;
    }

    .accounts-page .accounts-heading-actions .button,
    .accounts-page .heading-actions .button {
        width: 52px !important;
        min-width: 52px !important;
        height: 52px !important;
        min-height: 52px !important;
        padding: 0 !important;
        border-radius: 16px !important;
    }

    .accounts-page .accounts-heading-actions .button .button-label,
    .accounts-page .heading-actions .button .button-label {
        display: none !important;
    }

    /* 5. Telefones compactos e sem sobreposição. */
    .phone-ddi-control {
        display: grid !important;
        grid-template-columns: 112px minmax(0, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        min-height: 54px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    .phone-ddi-control .phone-ddi-select,
    .phone-ddi-control input {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 54px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* 6. Abas compactas e inequívocas. */
    .company-form-tablist,
    .crm-edit-tablist {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: 100% !important;
        gap: 4px !important;
        padding: 5px !important;
        border-radius: 17px !important;
        overflow: hidden !important;
    }

    .company-form-tab,
    .crm-edit-tab {
        min-width: 0 !important;
        width: 100% !important;
        min-height: 46px !important;
        padding: 7px 4px !important;
        border-radius: 12px !important;
        font-size: clamp(10px, 3vw, 13px) !important;
        line-height: 1.12 !important;
        text-align: center !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }
}

/* Correção final específica da listagem de Contratantes no mobile. */
@media (max-width: 820px) {
    /* Mantém Filtros, Importar e Novo Contratante dentro da mesma barra e no canto direito. */
    .page-heading.page-heading--actions-only {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-inline: 0 !important;
        overflow: hidden !important;
    }

    .page-heading.page-heading--actions-only > .heading-actions {
        display: flex !important;
        flex: 0 0 auto !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 0 0 auto !important;
        gap: 8px !important;
    }

    .page-heading.page-heading--actions-only > .heading-actions > .button,
    .page-heading.page-heading--actions-only > .heading-actions > a,
    .page-heading.page-heading--actions-only > .heading-actions > button {
        position: static !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        inset: auto !important;
    }

    /* Contratantes: card compacto, ações dentro do card à direita e nome em linha própria. */
    .responsive-table.contact-mobile-list tbody tr {
        position: relative !important;
        display: block !important;
        min-height: 142px !important;
        padding: 18px !important;
        overflow: hidden !important;
    }

    .responsive-table.contact-mobile-list tbody tr > td.bulk-select-column,
    .responsive-table.contact-mobile-list tbody tr > td.bulk-select-cell,
    .responsive-table.contact-mobile-list tbody tr > td[data-label="Selecionar"] {
        display: none !important;
    }

    .responsive-table.contact-mobile-list tbody tr > td.actions,
    .responsive-table.contact-mobile-list tbody tr > td[data-label="Ações"] {
        position: absolute !important;
        top: 14px !important;
        right: 14px !important;
        left: auto !important;
        bottom: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: auto !important;
        max-width: calc(100% - 28px) !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 8px !important;
        z-index: 5 !important;
        transform: none !important;
    }

    .responsive-table.contact-mobile-list tbody tr > td.is-primary-field,
    .responsive-table.contact-mobile-list tbody tr > td[data-mobile-primary="true"] {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        padding: 76px 0 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        text-align: left !important;
        font-size: 18px !important;
        font-weight: 750 !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    .responsive-table.contact-mobile-list tbody tr > td.is-primary-field::before,
    .responsive-table.contact-mobile-list tbody tr > td[data-mobile-primary="true"]::before {
        display: none !important;
        content: none !important;
    }
}


/* Contratantes mobile — toolbar realmente agrupada no canto direito.
   Este seletor deliberadamente possui maior especificidade que as camadas legadas
   que transformavam .heading-actions em grid distribuído pela largura. */
@media (max-width: 820px) {
    body.app-route-contratantes .clients-list-toolbar,
    body.app-route-empresas .clients-list-toolbar,
    body.app-route-contatos .clients-list-toolbar,
    body.app-route-clientes .clients-list-toolbar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 54px !important;
        margin: 0 0 14px !important;
        padding: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    body.app-route-contratantes .clients-list-toolbar > .heading-actions,
    body.app-route-empresas .clients-list-toolbar > .heading-actions,
    body.app-route-contatos .clients-list-toolbar > .heading-actions,
    body.app-route-clientes .clients-list-toolbar > .heading-actions {
        display: flex !important;
        grid-template-columns: none !important;
        grid-auto-flow: initial !important;
        grid-auto-columns: initial !important;
        flex: 0 0 auto !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: fit-content !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 0 auto !important;
        padding: 0 !important;
        gap: 8px !important;
        overflow: visible !important;
    }

    body.app-route-contratantes .clients-list-toolbar > .heading-actions > *,
    body.app-route-empresas .clients-list-toolbar > .heading-actions > *,
    body.app-route-contatos .clients-list-toolbar > .heading-actions > *,
    body.app-route-clientes .clients-list-toolbar > .heading-actions > * {
        position: static !important;
        inset: auto !important;
        display: inline-flex !important;
        flex: 0 0 46px !important;
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        grid-column: auto !important;
        transform: none !important;
    }
}

/* Contratantes mobile — área de toque mínima e dimensões estáveis.
   Mantém os três comandos compactos, porém confortáveis para toque. */
@media (max-width: 820px) {
    body.app-route-contratantes .clients-list-toolbar > .heading-actions > .button,
    body.app-route-contratantes .clients-list-toolbar > .heading-actions > a.button,
    body.app-route-contratantes .clients-list-toolbar > .heading-actions > button.button,
    body.app-route-empresas .clients-list-toolbar > .heading-actions > .button,
    body.app-route-contatos .clients-list-toolbar > .heading-actions > .button,
    body.app-route-clientes .clients-list-toolbar > .heading-actions > .button {
        box-sizing: border-box !important;
        flex: 0 0 48px !important;
        inline-size: 48px !important;
        block-size: 48px !important;
        width: 48px !important;
        height: 48px !important;
        min-inline-size: 48px !important;
        min-block-size: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-inline-size: 48px !important;
        max-block-size: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
        aspect-ratio: 1 / 1 !important;
        padding: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        overflow: hidden !important;
    }

    body.app-route-contratantes .clients-list-toolbar > .heading-actions > .button svg,
    body.app-route-empresas .clients-list-toolbar > .heading-actions > .button svg,
    body.app-route-contatos .clients-list-toolbar > .heading-actions > .button svg,
    body.app-route-clientes .clients-list-toolbar > .heading-actions > .button svg {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        flex: 0 0 22px !important;
        display: block !important;
    }

    body.app-route-contratantes .clients-list-toolbar > .heading-actions {
        gap: 10px !important;
        min-height: 48px !important;
    }
}

/* Serviços mobile — toolbar horizontal, sem sobreposição e sem seleção em lote. */
@media (max-width: 820px) {
    body.app-route-servicos .services-page .page-heading.services-heading {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: 100% !important;
        min-height: 48px !important;
        margin: 0 0 18px !important;
        padding: 0 !important;
        position: static !important;
        overflow: visible !important;
    }

    body.app-route-servicos .services-page .page-heading .heading-actions,
    body.app-route-servicos .services-page .services-heading-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        overflow: visible !important;
    }

    body.app-route-servicos .services-heading-actions > .services-mobile-filter-toggle,
    body.app-route-servicos .services-heading-actions > [data-modal-open="company-service-create-modal"] {
        position: static !important;
        inset: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 48px !important;
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        transform: none !important;
    }

    body.app-route-servicos .services-heading-actions .button-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: currentColor !important;
        opacity: 1 !important;
        visibility: visible !important;
        line-height: 0 !important;
    }

    body.app-route-servicos .services-heading-actions .button-icon svg {
        display: block !important;
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
        fill: currentColor !important;
        stroke: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    body.app-route-servicos .services-heading-actions > [data-modal-open="company-service-create-modal"] .button-icon,
    body.app-route-servicos .services-heading-actions > [data-modal-open="company-service-create-modal"] .button-icon svg {
        color: #fff !important;
        fill: #fff !important;
    }

    body.app-route-servicos .services-heading-actions .button > span:last-child {
        display: none !important;
    }

    body.app-route-servicos .services-panel,
    body.app-route-servicos .services-table-wrap {
        margin-top: 0 !important;
    }

    body.app-route-servicos .services-table .bulk-select-column,
    body.app-route-servicos .services-table .bulk-select-cell,
    body.app-route-servicos .services-table [data-label="Selecionar"],
    body.app-route-servicos .services-table [data-bulk-row],
    body.app-route-servicos .services-table [data-bulk-select-all],
    body.app-route-servicos .bulk-delete-toolbar,
    body.app-route-servicos .bulk-selection-bar,
    body.app-route-servicos [data-bulk-toolbar],
    body.app-route-servicos [data-bulk-selection-bar] {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
    }

    body.app-route-servicos .services-table tbody tr {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }
}


/* Consolidado de mobile-toolbar-global-right.css — v2.105 */
/* Meu Palcco — barra de ações global no mobile.
   Deve ser o último CSS carregado para neutralizar grids, space-between e larguras legadas. */
@media (max-width: 820px) {
    /* Barras externas de ações de todas as páginas administrativas. */
    .content > .page-heading,
    .content > .compact-heading,
    .content > .opportunity-heading,
    .content > .services-heading,
    .content > .accounts-heading,
    .content > .module-heading,
    .content > .list-heading,
    .content > .page-toolbar,
    .content > .table-toolbar,
    .content > .resource-toolbar,
    .content > .kanban-toolbar,
    .content > .toolbar,
    .content .page-heading--actions-only {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        gap: 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Contêiner real dos botões. */
    .content :is(
        .heading-actions,
        .services-heading-actions,
        .accounts-heading-actions,
        .page-toolbar__actions,
        .toolbar-actions,
        .table-actions,
        .resource-actions,
        .kanban-actions,
        .page-actions,
        .actions-toolbar,
        .filters-heading-actions,
        .clients-list-toolbar .heading-actions
    ) {
        display: flex !important;
        flex: 0 0 auto !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: auto !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: 10px !important;
        grid-template-columns: none !important;
    }

    /* Neutraliza qualquer distribuição antiga entre as extremidades. */
    .content :is(
        .heading-actions,
        .services-heading-actions,
        .accounts-heading-actions,
        .page-toolbar__actions,
        .toolbar-actions,
        .table-actions,
        .resource-actions,
        .kanban-actions,
        .page-actions,
        .actions-toolbar,
        .filters-heading-actions
    ) > * {
        flex: 0 0 48px !important;
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        align-self: center !important;
    }

    /* A própria toolbar da listagem de recursos também precisa encostar à direita. */
    .content .clients-list-toolbar,
    .content .page-heading--actions-only {
        justify-content: flex-end !important;
    }

    .content .clients-list-toolbar > .heading-actions,
    .content .page-heading--actions-only > .heading-actions {
        margin-left: auto !important;
        margin-right: 0 !important;
    }

    /* Ícones com tamanho consistente e área de toque confortável. */
    .content :is(
        .heading-actions,
        .services-heading-actions,
        .accounts-heading-actions,
        .page-toolbar__actions,
        .toolbar-actions,
        .table-actions,
        .resource-actions,
        .kanban-actions,
        .page-actions,
        .actions-toolbar,
        .filters-heading-actions
    ) > * svg {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
    }
}

/* Prestadores: garante a mesma barra compacta à direita usada em Contratantes. */
@media (max-width: 820px) {
    .content > .service-providers-list-toolbar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    .content > .service-providers-list-toolbar > .heading-actions {
        display: flex !important;
        flex: 0 0 auto !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: auto !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        gap: 10px !important;
        grid-template-columns: none !important;
    }

    .content > .service-providers-list-toolbar > .heading-actions > * {
        display: inline-flex !important;
        flex: 0 0 48px !important;
        align-items: center !important;
        justify-content: center !important;
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
    }

    .content > .service-providers-list-toolbar > .heading-actions > * svg {
        width: 22px !important;
        height: 22px !important;
    }
}



/* Consolidado de mobile-ux-final.css — v2.105 */
/* Camada final de consistência mobile — 2026-07-18 */
@media (max-width: 760px) {
    /* Filtro de período do Kanban: sheet compacto, atalhos úteis e datas nativas no mobile. */
    .period-filter-mobile-backdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: 10020 !important;
        width: 100% !important;
        height: 100% !important;
        border: 0 !important;
        padding: 0 !important;
        background: rgba(32, 20, 47, .42) !important;
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
    }
    .period-filter-mobile-backdrop[hidden] { display: none !important; }
    [data-period-filter].is-open { position: relative !important; z-index: 10030 !important; }
    [data-period-filter] .period-filter-popover {
        position: fixed !important;
        z-index: 10040 !important;
        left: 12px !important;
        right: 12px !important;
        top: auto !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100dvh - 32px) !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        overflow-y: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: #fff !important;
        border-radius: 22px !important;
        box-shadow: 0 24px 64px rgba(32, 20, 47, .28) !important;
        overscroll-behavior: contain;
    }
    [data-period-filter] .period-filter-sheet-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        padding: 14px 14px 8px !important;
    }
    [data-period-filter] .period-filter-sheet-header strong { font-size: 1rem !important; }
    [data-period-filter] .period-filter-sheet-header button {
        display: inline-grid !important;
        place-items: center !important;
        width: 42px !important;
        height: 42px !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: #f7f3ff !important;
        color: #5b21b6 !important;
        font: inherit !important;
        font-size: 1.4rem !important;
    }
    [data-period-filter] .period-filter-presets {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        padding: 8px 14px 12px !important;
        border: 0 !important;
        background: #fff !important;
    }
    [data-period-filter] .period-filter-presets button {
        min-height: 44px !important;
        padding: 9px 10px !important;
        text-align: left !important;
        white-space: normal !important;
        font-size: .82rem !important;
        line-height: 1.2 !important;
    }
    [data-period-filter] .period-filter-mobile-fields {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 0 14px 12px !important;
    }
    [data-period-filter] .period-filter-mobile-fields label { display: grid !important; gap: 5px !important; min-width: 0 !important; }
    [data-period-filter] .period-filter-mobile-fields span { color: var(--muted, #6f647c) !important; font-size: .75rem !important; font-weight: 600 !important; }
    [data-period-filter] .period-filter-mobile-fields input {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 46px !important;
        border: 1px solid rgba(126, 48, 225, .16) !important;
        border-radius: 12px !important;
        background: #fff !important;
        color: #2d1f3a !important;
        padding: 0 10px !important;
        font: inherit !important;
    }
    [data-period-filter] .period-filter-calendar { display: none !important; }
    [data-period-filter] .period-filter-footer {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 2 !important;
        display: flex !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        background: #fff !important;
        padding: 10px 14px calc(12px + env(safe-area-inset-bottom)) !important;
        border-top: 1px solid rgba(126, 48, 225, .10) !important;
    }
    [data-period-filter] .period-filter-footer .button { min-height: 44px !important; width: auto !important; }
    body.period-filter-open { overflow: hidden !important; }

    /* Abas internas: o wrapper contém também os painéis/formulários.
       Ele não pode ser uma superfície exclusivamente horizontal, pois isso
       bloqueia o início do scroll vertical no Safari/iOS quando o gesto nasce
       sobre um campo do formulário. A rolagem horizontal pertence só ao tablist. */
    [data-crm-edit-tabs], .crm-edit-tabs, .event-edit-tabs, .resource-form-tabs {
        position: relative !important;
        z-index: 20 !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        touch-action: pan-y pinch-zoom !important;
        pointer-events: auto !important;
    }
    .crm-edit-tablist,
    .event-edit-tablist,
    .resource-form-tablist,
    [role="tablist"] {
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y pinch-zoom !important;
    }
    [data-crm-edit-tab], .crm-edit-tab, .event-edit-tab, .resource-form-tab {
        position: relative !important;
        z-index: 21 !important;
        flex: 0 0 auto !important;
        min-width: max-content !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }
    [data-crm-edit-panel] {
        position: relative !important;
        z-index: 1 !important;
        touch-action: pan-y pinch-zoom !important;
    }

    /* Telefones: remove contêiner fantasma e mantém DDI + número na mesma linha. */
    .form-field .phone-ddi-control,
    .phone-ddi-control {
        display: grid !important;
        grid-template-columns: minmax(118px, 38%) minmax(0, 1fr) !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        overflow: visible !important;
    }
    .phone-ddi-control .phone-ddi-select,
    .phone-ddi-control input {
        width: 100% !important;
        min-width: 0 !important;
        height: 54px !important;
        min-height: 54px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .phone-ddi-control input { text-overflow: clip !important; font-size: 16px !important; }

    /* Selects adaptativos e subcategoria: elimina renderização visual duplicada. */
    .searchable-select { min-height: 54px !important; height: auto !important; }
    .searchable-select > select {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    .searchable-select__control,
    .searchable-select__input { min-height: 54px !important; height: 54px !important; }
    [data-subcategory-field] .searchable-select,
    [data-provider-subcategory-field] .searchable-select { width: 100% !important; }

    /* Cards responsivos de Eventos: conteúdo compacto, ações no topo direito. */
    .responsive-table tbody tr,
    .mobile-card-row {
        position: relative !important;
        min-height: 0 !important;
        height: auto !important;
    }
    .responsive-table tbody tr > td.actions {
        position: absolute !important;
        top: 14px !important;
        right: 14px !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        z-index: 3 !important;
    }
    .responsive-table tbody tr > td:not(.actions):not(.bulk-select-column) {
        padding-right: 116px !important;
    }
    .responsive-table tbody tr > td:first-of-type:not(.bulk-select-column) { padding-top: 70px !important; }
    .responsive-table tbody tr > td { min-height: 0 !important; }
    .responsive-table tbody tr > td::before { margin-bottom: 3px !important; }

    /* Contratantes: centralização invariável de todos os ícones. */
    .icon-action,
    .button-icon,
    .heading-actions .button,
    .resource-actions button,
    .resource-actions a {
        align-items: center !important;
        justify-content: center !important;
    }
    .icon-action svg,
    .button-icon svg,
    .resource-actions svg {
        display: block !important;
        width: 22px !important;
        height: 22px !important;
        margin: auto !important;
        transform: none !important;
        flex: 0 0 auto !important;
    }

    /* Serviços: toolbar objetiva, sem KPIs e filtros recolhidos. */
    .services-page { gap: 12px !important; }
    .services-summary { display: none !important; }
    .services-heading-actions {
        display: flex !important;
        justify-content: flex-end !important;
        gap: 10px !important;
    }
    .services-heading-actions .button {
        width: 52px !important;
        min-width: 52px !important;
        height: 52px !important;
        padding: 0 !important;
        border-radius: 16px !important;
    }
    .services-heading-actions .button > span:last-child { display: none !important; }
    .services-heading-actions .button-icon,
    .services-heading-actions .button-icon svg { display: block !important; width: 24px !important; height: 24px !important; }
    .services-mobile-filter-toggle { display: inline-flex !important; }
    .services-filters { display: none !important; grid-template-columns: 1fr !important; }
    .services-filters.is-mobile-open { display: grid !important; }
    .services-panel .bulk-delete-form,
    .services-table .bulk-select-column { display: none !important; }
    .services-table tbody tr { padding-right: 78px !important; }
    .services-table tbody tr > td.actions {
        top: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        display: flex !important;
        align-items: flex-start !important;
    }
    .services-actions {
        display: grid !important;
        grid-template-columns: 48px !important;
        grid-auto-rows: 48px !important;
        gap: 8px !important;
        width: 48px !important;
    }
    .services-actions .icon-action,
    .services-actions .services-action-form {
        width: 48px !important;
        height: 48px !important;
        margin: 0 !important;
    }
    .services-actions .services-action-form { display: block !important; }
    .services-actions .services-action-form .icon-action { display: inline-flex !important; }
    .services-table tbody tr > td:not(.actions):not(.bulk-select-column) { padding-right: 78px !important; }

    /* Modal de serviço: botão fechar sempre visível e acessível. */
    .services-modal .services-modal-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 44px !important;
        align-items: start !important;
        gap: 10px !important;
    }
    .services-modal .services-modal-header > .icon-action[data-modal-close] {
        display: inline-flex !important;
        position: relative !important;
        top: 0 !important;
        right: 0 !important;
        width: 44px !important;
        height: 44px !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    .services-modal .services-modal-actions .secondary[data-modal-close] { display: inline-flex !important; }
}

@media (min-width: 761px) {
    .services-mobile-filter-toggle { display: none !important; }
}

/* ========================================================================== 
   Componente unificado de registros — mobile
   Todos os módulos baseados em listagem usam: conteúdo à esquerda e ações fixas
   à direita, sem tabela visual, sem rolagem horizontal e sem deslocamento dos
   botões por nomes longos.
   ========================================================================== */
@media (max-width: 760px) {
    .mobile-unified-record-list,
    .mobile-unified-record-list tbody,
    .mobile-unified-record-list tr,
    .mobile-unified-record-list td {
        box-sizing: border-box !important;
    }

    .mobile-unified-record-list {
        width: 100% !important;
        min-width: 0 !important;
        border-collapse: separate !important;
        border-spacing: 0 14px !important;
        table-layout: fixed !important;
    }

    .mobile-unified-record-list thead {
        display: none !important;
    }

    .mobile-unified-record-list tbody {
        display: grid !important;
        width: 100% !important;
        gap: 14px !important;
    }

    .mobile-unified-record-list tbody > tr {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) max-content !important;
        grid-template-areas: "record-name record-actions" !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 92px !important;
        margin: 0 !important;
        padding: 18px 16px 18px 20px !important;
        overflow: hidden !important;
        border: 1px solid var(--border-color, #e8dff2) !important;
        border-radius: 24px !important;
        background: #fff !important;
        box-shadow: 0 8px 24px rgba(76, 29, 149, 0.05) !important;
    }

    /* No mobile, o card exibe apenas a informação principal e as ações. */
    .mobile-unified-record-list tbody > tr > td {
        display: none !important;
        position: static !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .mobile-unified-record-list tbody > tr > td.is-primary-field {
        display: block !important;
        grid-area: record-name !important;
        align-self: center !important;
        padding: 0 14px 0 0 !important;
        overflow: hidden !important;
        color: var(--text-primary, #22192f) !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        line-height: 1.32 !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        white-space: normal !important;
    }

    .mobile-unified-record-list tbody > tr > td.is-primary-field::before,
    .mobile-unified-record-list tbody > tr > td.actions::before {
        display: none !important;
        content: none !important;
    }

    .mobile-unified-record-list tbody > tr > td.actions {
        display: flex !important;
        grid-area: record-actions !important;
        position: static !important;
        inset: auto !important;
        align-self: center !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 0 !important;
        gap: 10px !important;
        overflow: visible !important;
        z-index: 1 !important;
    }

    .mobile-unified-record-list tbody > tr > td.actions > a,
    .mobile-unified-record-list tbody > tr > td.actions > button,
    .mobile-unified-record-list tbody > tr > td.actions > form,
    .mobile-unified-record-list tbody > tr > td.actions .icon-action,
    .mobile-unified-record-list tbody > tr > td.actions .services-action-form {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    .mobile-unified-record-list tbody > tr > td.actions .icon-action,
    .mobile-unified-record-list tbody > tr > td.actions > .icon-action {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 48px !important;
        min-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 !important;
        border-radius: 15px !important;
        line-height: 1 !important;
    }

    .mobile-unified-record-list tbody > tr > td.actions .icon-action svg {
        display: block !important;
        width: 22px !important;
        height: 22px !important;
        margin: 0 !important;
        transform: none !important;
    }

    /* Serviços também seguem a mesma linha horizontal de ações no card. */
    .mobile-unified-record-list.services-table tbody > tr {
        padding-right: 14px !important;
    }

    .mobile-unified-record-list .services-actions {
        display: flex !important;
        grid-template-columns: none !important;
        grid-auto-rows: auto !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: auto !important;
        height: auto !important;
        gap: 8px !important;
    }

    .mobile-unified-record-list .services-actions .icon-action,
    .mobile-unified-record-list .services-actions .services-action-form,
    .mobile-unified-record-list .services-actions .services-action-form .icon-action {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
    }

    .mobile-unified-record-list .bulk-select-column {
        display: none !important;
    }

    .table-wrap:has(.mobile-unified-record-list),
    .services-table-wrap:has(.mobile-unified-record-list) {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding: 0 !important;
    }
}

/* ========================================================================== 
   V17 — alinhamento óptico e estrutural definitivo das ações mobile
   A área de ações funciona como um bloco independente. Cada botão tem caixa
   idêntica e cada SVG é centralizado pelo centro geométrico do próprio botão,
   sem depender de line-height, baseline ou dimensões internas do desenho.
   ========================================================================== */
@media (max-width: 760px) {
    :is(
        .mobile-unified-record-list,
        .responsive-table,
        .services-table,
        .accounts-table,
        .cash-flow-table
    ) tbody > tr > td.actions {
        align-self: center !important;
        justify-self: end !important;
        vertical-align: middle !important;
        line-height: 0 !important;
    }

    /* O conjunto inteiro é uma grade horizontal fixa: uma coluna por ação. */
    .mobile-unified-record-list tbody > tr > td.actions {
        display: grid !important;
        grid-auto-flow: column !important;
        grid-auto-columns: 48px !important;
        grid-template-rows: 48px !important;
        place-items: center !important;
        align-content: center !important;
        justify-content: end !important;
        column-gap: 10px !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    /* Cada filho da área de ações ocupa exatamente uma célula da grade. */
    .mobile-unified-record-list tbody > tr > td.actions > :is(a, button, form, .services-action-form) {
        display: grid !important;
        place-items: center !important;
        position: relative !important;
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 0 !important;
        vertical-align: middle !important;
    }

    .mobile-unified-record-list tbody > tr > td.actions > form > .icon-action,
    .mobile-unified-record-list tbody > tr > td.actions > .services-action-form > .icon-action,
    .mobile-unified-record-list tbody > tr > td.actions > :is(a, button).icon-action,
    .mobile-unified-record-list tbody > tr > td.actions .icon-action {
        position: relative !important;
        inset: auto !important;
        display: grid !important;
        place-items: center !important;
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 0 !important;
        vertical-align: middle !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    /* Centralização independente do baseline e da geometria do path. */
    .mobile-unified-record-list tbody > tr > td.actions .icon-action > svg {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        display: block !important;
        width: 22px !important;
        height: 22px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translate(-50%, -50%) !important;
        transform-origin: center center !important;
        overflow: visible !important;
        pointer-events: none !important;
    }

    /* Ajuste óptico mínimo do lápis, cujo desenho possui massa visual inferior. */
    .mobile-unified-record-list tbody > tr > td.actions > :first-child .icon-action > svg,
    .mobile-unified-record-list tbody > tr > td.actions > :first-child.icon-action > svg {
        transform: translate(-51%, -52%) !important;
    }

    /* Desabilitar altera somente a aparência, nunca a geometria. */
    .mobile-unified-record-list tbody > tr > td.actions .icon-action:disabled,
    .mobile-unified-record-list tbody > tr > td.actions .icon-action[aria-disabled="true"],
    .mobile-unified-record-list tbody > tr > td.actions .icon-action.is-disabled {
        width: 48px !important;
        min-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    /* Espaço real entre texto e ações, sem permitir sobreposição. */
    .mobile-unified-record-list tbody > tr > td.is-primary-field {
        min-width: 0 !important;
        padding-right: 18px !important;
    }

    /* Serviços seguem exatamente a mesma geometria do componente global. */
    .mobile-unified-record-list .services-actions {
        display: grid !important;
        grid-auto-flow: column !important;
        grid-auto-columns: 48px !important;
        grid-template-rows: 48px !important;
        place-items: center !important;
        justify-content: end !important;
        column-gap: 10px !important;
    }

    .mobile-unified-record-list .services-actions :is(.icon-action, .services-action-form, .services-action-form .icon-action) {
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}