/*
 * Meu Palcco v219 — consolidação responsiva tablet/mobile.
 * Esta camada é carregada por último e corrige conflitos acumulados entre
 * breakpoints antigos sem alterar regras funcionais dos módulos.
 */

/* Contenção estrutural: nenhum módulo administrativo deve ampliar a viewport. */
@media (max-width: 1060px) {
    html,
    body,
    .app-shell,
    .main-area,
    .content,
    .content > *,
    .panel,
    .table-wrap,
    .resource-list,
    .filters,
    .filters-panel {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    html,
    body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .content {
        width: 100% !important;
        overflow-x: clip !important;
    }

    img,
    video,
    canvas,
    iframe {
        max-width: 100%;
    }
}

/*
 * Cabeçalhos que possuem título + ações.
 * O título recebe uma coluna elástica e os botões nunca comprimem o texto
 * para uma coluna de poucas letras, como ocorria no Financeiro/Tarefas.
 */
@media (max-width: 900px) {
    .content > .page-heading:has(> .heading-copy),
    .content > .compact-heading:has(> .heading-copy),
    .content > .finance-heading,
    .content > .task-page-heading {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        justify-content: stretch !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .content > .page-heading > .heading-copy,
    .content > .compact-heading > .heading-copy,
    .finance-heading > .heading-copy,
    .task-page-heading > .heading-copy {
        display: block !important;
        grid-column: 1 !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .content > .page-heading > .heading-copy h1,
    .content > .compact-heading > .heading-copy h1,
    .finance-heading > .heading-copy h1,
    .task-page-heading > .heading-copy h1 {
        max-width: 100% !important;
        margin-top: 0 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
        white-space: normal !important;
    }

    .content > .page-heading > .heading-copy p,
    .content > .compact-heading > .heading-copy p,
    .finance-heading > .heading-copy p,
    .task-page-heading > .heading-copy p {
        max-width: 100% !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    .content > .page-heading:has(> .heading-copy) > .heading-actions,
    .content > .compact-heading:has(> .heading-copy) > .heading-actions,
    .finance-heading > .heading-actions,
    .task-page-heading > .heading-actions {
        grid-column: 2 !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        justify-self: end !important;
        align-self: center !important;
    }

    /* Barras sem título permanecem integralmente agrupadas à direita. */
    .content > .page-heading--actions-only,
    .content > .clients-list-toolbar,
    .content > .service-providers-list-toolbar,
    .content > .system-support-admin-heading {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 8px !important;
    }

    .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,
        .header-actions,
        .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;
        gap: 8px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    /*
     * Em tablet compacto e mobile, ações de cabeçalho usam apenas o SVG.
     * O texto continua como nome acessível do controle e deixa de ser cortado.
     */
    .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,
        .header-actions,
        .filters-heading-actions
    ) > :is(a.button, button.button, a.btn, button.btn):has(svg, .button-icon, .ui-button-icon),
    .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,
        .header-actions,
        .filters-heading-actions
    ) > form > :is(a.button, button.button, a.btn, button.btn):has(svg, .button-icon, .ui-button-icon) {
        display: inline-flex !important;
        flex: 0 0 46px !important;
        align-items: center !important;
        justify-content: center !important;
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        padding: 0 !important;
        gap: 0 !important;
        overflow: hidden !important;
        border-radius: 14px !important;
        font-size: 0 !important;
        line-height: 0 !important;
        white-space: nowrap !important;
        text-overflow: clip !important;
    }

    /* Fallback seguro: se um componente contextual não receber SVG, mantém o texto legí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,
        .header-actions,
        .filters-heading-actions
    ) > :is(a.button, button.button, a.btn, button.btn):not(:has(svg, .button-icon, .ui-button-icon)),
    .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,
        .header-actions,
        .filters-heading-actions
    ) > form > :is(a.button, button.button, a.btn, button.btn):not(:has(svg, .button-icon, .ui-button-icon)) {
        display: inline-flex !important;
        flex: 0 1 auto !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: min(180px, 45vw) !important;
        min-height: 46px !important;
        padding: 0 12px !important;
        overflow: hidden !important;
        border-radius: 14px !important;
        font-size: .82rem !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    .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,
        .header-actions,
        .filters-heading-actions
    ) > form {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        width: auto !important;
        margin: 0 !important;
    }

    .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,
        .header-actions,
        .filters-heading-actions
    ) :is(.ui-button-icon, .button-icon, svg) {
        display: inline-flex !important;
        flex: 0 0 21px !important;
        width: 21px !important;
        min-width: 21px !important;
        height: 21px !important;
        min-height: 21px !important;
        margin: 0 !important;
    }

    .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,
        .header-actions,
        .filters-heading-actions
    ) > :is(a.button, button.button, a.btn, button.btn):has(svg, .button-icon, .ui-button-icon) > :is(span:not(.ui-button-icon):not(.button-icon), .button-label) {
        display: none !important;
    }

    /* Formulários e filtros não podem introduzir largura mínima incompatível. */
    .form-grid,
    .task-filter-grid,
    .filters,
    .filters-panel,
    .modal-grid,
    .finance-entry-form__grid,
    .contract-form-section__grid {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    input,
    select,
    textarea,
    .searchable-select,
    .searchable-select__input,
    .phone-ddi-control {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Financeiro: /entradas-e-saidas e o alias /financeiro recebem a mesma regra. */
@media (max-width: 820px) {
    body:is(.app-route-entradas-e-saidas, .app-route-financeiro) .finance-heading {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 46px !important;
        align-items: center !important;
        justify-content: stretch !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body:is(.app-route-entradas-e-saidas, .app-route-financeiro) .finance-heading .heading-copy {
        display: block !important;
        grid-column: 1 !important;
        min-width: 0 !important;
        width: auto !important;
    }

    body:is(.app-route-entradas-e-saidas, .app-route-financeiro) .finance-heading .heading-copy h1 {
        max-width: 100% !important;
        margin: 0 !important;
        font-size: clamp(1.45rem, 7vw, 1.9rem) !important;
        line-height: 1.12 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    body:is(.app-route-entradas-e-saidas, .app-route-financeiro) .finance-heading .heading-actions,
    body:is(.app-route-entradas-e-saidas, .app-route-financeiro) .finance-create-actions {
        display: flex !important;
        grid-column: 2 !important;
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        margin: 0 !important;
        justify-content: flex-end !important;
    }

    body:is(.app-route-entradas-e-saidas, .app-route-financeiro) .finance-create-button {
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        padding: 0 !important;
        font-size: 0 !important;
    }

    body:is(.app-route-entradas-e-saidas, .app-route-financeiro) .finance-create-button > span {
        display: none !important;
    }

    body:is(.app-route-entradas-e-saidas, .app-route-financeiro) .finance-create-button svg {
        width: 21px !important;
        height: 21px !important;
    }

    body:is(.app-route-entradas-e-saidas, .app-route-financeiro) :is(
        .finance-entries-panel,
        .finance-events-panel,
        .finance-table-wrap,
        .finance-entries-table-wrap,
        .finance-entries-table,
        .finance-events-table
    ) {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Tarefas: título volta a aparecer e cards preservam espaço real para as três ações. */
@media (max-width: 820px) {
    body.app-route-tarefas .task-page-heading {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 10px !important;
    }

    body.app-route-tarefas .task-page-heading .heading-copy {
        display: block !important;
        min-width: 0 !important;
    }

    body.app-route-tarefas .task-page-heading .heading-actions {
        width: auto !important;
        margin-left: 0 !important;
    }

    body.app-route-tarefas .task-list-panel .task-table tbody tr {
        position: relative !important;
        min-height: 104px !important;
        height: auto !important;
        padding: 16px !important;
        overflow: hidden !important;
    }

    body.app-route-tarefas .task-list-panel .task-table tbody tr > td.is-primary-field {
        display: block !important;
        min-height: 72px !important;
        padding: 4px 142px 4px 0 !important;
        text-align: left !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        white-space: normal !important;
    }

    body.app-route-tarefas .task-list-panel .task-table tbody td.actions {
        position: absolute !important;
        top: 50% !important;
        right: 14px !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 7px !important;
        width: auto !important;
        max-width: 134px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.app-route-tarefas .task-list-panel .task-table tbody td.actions .icon-action {
        flex: 0 0 40px !important;
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        padding: 0 !important;
    }

    body.app-route-tarefas .task-list-panel .task-mobile-meta {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.app-route-tarefas .task-list-panel .task-mobile-meta span {
        max-width: 100% !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }
}

/* Cards de registros: textos longos não invadem o trilho de ações. */
@media (max-width: 820px) {
    .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 {
        max-width: 100% !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    .responsive-table tbody td.actions,
    .accounts-table tbody td.actions,
    .cash-flow-table tbody td.actions {
        white-space: nowrap !important;
    }

    .responsive-table tbody td.actions .icon-action,
    .accounts-table tbody td.actions .icon-action,
    .cash-flow-table tbody td.actions .icon-action {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .responsive-table tbody td.actions .icon-action svg,
    .accounts-table tbody td.actions .icon-action svg,
    .cash-flow-table tbody td.actions .icon-action svg {
        display: block !important;
        margin: 0 !important;
        transform: none !important;
    }
}

/* Mobile estreito: mantém título e ações simultaneamente sem corte. */
@media (max-width: 430px) {
    .content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .content > .page-heading:has(> .heading-copy),
    .content > .compact-heading:has(> .heading-copy),
    .content > .finance-heading,
    .content > .task-page-heading {
        gap: 8px !important;
    }

    .content > .page-heading > .heading-copy p,
    .content > .compact-heading > .heading-copy p,
    .task-page-heading > .heading-copy p {
        display: none !important;
    }

    .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,
        .header-actions,
        .filters-heading-actions
    ) {
        gap: 6px !important;
    }

    .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,
        .header-actions,
        .filters-heading-actions
    ) > :is(a.button, button.button, a.btn, button.btn):has(svg, .button-icon, .ui-button-icon),
    .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,
        .header-actions,
        .filters-heading-actions
    ) > form > :is(a.button, button.button, a.btn, button.btn):has(svg, .button-icon, .ui-button-icon) {
        flex-basis: 42px !important;
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        border-radius: 13px !important;
    }

    .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,
        .header-actions,
        .filters-heading-actions
    ) > :is(a.button, button.button, a.btn, button.btn):not(:has(svg, .button-icon, .ui-button-icon)) {
        max-width: min(132px, 40vw) !important;
        min-height: 42px !important;
        padding-inline: 10px !important;
        font-size: .78rem !important;
    }

    body:is(.app-route-entradas-e-saidas, .app-route-financeiro) .finance-heading {
        grid-template-columns: minmax(0, 1fr) 42px !important;
    }

    body:is(.app-route-entradas-e-saidas, .app-route-financeiro) .finance-heading .heading-actions,
    body:is(.app-route-entradas-e-saidas, .app-route-financeiro) .finance-create-actions,
    body:is(.app-route-entradas-e-saidas, .app-route-financeiro) .finance-create-button {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
    }

    body.app-route-tarefas .task-list-panel .task-table tbody tr > td.is-primary-field {
        min-height: 68px !important;
        padding-right: 132px !important;
        font-size: 16px !important;
    }

    body.app-route-tarefas .task-list-panel .task-table tbody td.actions {
        right: 12px !important;
        gap: 6px !important;
        max-width: 126px !important;
    }

    body.app-route-tarefas .task-list-panel .task-table tbody td.actions .icon-action {
        flex-basis: 38px !important;
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        border-radius: 12px !important;
    }
}

/* Telefones muito estreitos: formulários e rodapés sempre empilham sem overflow. */
@media (max-width: 380px) {
    .filter-actions,
    .form-submit-actions,
    .modal-actions,
    .import-modal__actions,
    .finance-entry-form__footer {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .filter-actions > *,
    .form-submit-actions > *,
    .modal-actions > *,
    .import-modal__actions > *,
    .finance-entry-form__footer > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}