/* Meu Palcco — camada mobile carregada por responsabilidade. */

@media (max-width: 820px) {
    /* Tabelas convertidas em cards */
    .resource-list,
    .accounts-table-wrap,
    .cash-flow-table-panel {
        width: 100% !important;
        margin: 0 !important;
        padding: 12px !important;
        overflow: visible !important;
    }

    .table-wrap,
    .accounts-table-wrap,
    .cash-flow-table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .responsive-table,
    .accounts-table,
    .cash-flow-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .responsive-table thead,
    .accounts-table thead,
    .cash-flow-table thead {
        display: none !important;
    }

    .responsive-table tbody,
    .accounts-table tbody,
    .cash-flow-table tbody {
        display: grid !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .responsive-table tbody tr,
    .accounts-table tbody tr,
    .cash-flow-table tbody tr {
        position: relative;
        display: flex !important;
        flex-direction: column;
        gap: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 14px !important;
        border: 1px solid var(--mobile-border) !important;
        border-radius: 18px !important;
        background: #fff !important;
        box-shadow: 0 8px 22px rgba(58, 29, 73, .055) !important;
        overflow: hidden;
    }

    .responsive-table tbody td,
    .accounts-table tbody td,
    .cash-flow-table tbody td {
        display: grid !important;
        grid-template-columns: minmax(102px, .85fr) minmax(0, 1.15fr);
        align-items: start;
        gap: 12px !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 9px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(87, 48, 120, .08) !important;
        background: transparent !important;
        color: var(--mobile-ink) !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
        text-align: right !important;
        overflow-wrap: normal;
        white-space: normal !important;
    }

    .responsive-table tbody td::before,
    .accounts-table tbody td::before,
    .cash-flow-table tbody td::before {
        content: attr(data-label);
        color: var(--mobile-muted);
        font-size: 13px;
        font-weight: 500;
        line-height: 1.35;
        text-align: left;
    }

    .responsive-table tbody td:last-child,
    .accounts-table tbody td:last-child,
    .cash-flow-table tbody td:last-child {
        border-bottom: 0 !important;
    }

    .responsive-table tbody td.is-primary-field {
        order: -2;
        display: block !important;
        padding: 2px 0 12px !important;
        border-bottom: 1px solid rgba(87, 48, 120, .10) !important;
        color: #281733 !important;
        font-size: 18px !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
        text-align: left !important;
    }

    .responsive-table tbody td.is-primary-field::before {
        display: block;
        margin-bottom: 3px;
        color: #7d7083;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: .07em;
        text-transform: uppercase;
    }

    .responsive-table tbody td.actions,
    .accounts-table tbody td.actions,
    .cash-flow-table tbody td.actions {
        display: flex !important;
        align-items: center;
        justify-content: flex-end !important;
        gap: 9px !important;
        padding: 12px 0 0 !important;
        border-bottom: 0 !important;
        text-align: right !important;
    }

    .responsive-table tbody td.actions::before,
    .accounts-table tbody td.actions::before,
    .cash-flow-table tbody td.actions::before {
        margin-right: auto;
        align-self: center;
    }

    .responsive-table tbody td.actions form,
    .accounts-table tbody td.actions form,
    .account-actions form {
        display: inline-flex !important;
        margin: 0 !important;
    }

    .responsive-table--clients tbody td[data-field="segment"],
    .responsive-table--clients tbody td[data-field="phone"],
    .responsive-table--clients tbody td[data-field="status"] {
        padding-block: 7px !important;
    }

    .responsive-table--opportunities tbody td[data-field="event_name"] {
        order: -3;
    }

    .responsive-table--opportunities tbody td[data-field="lead_name"] {
        order: -2;
    }

    .account-name-cell {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        text-align: left !important;
    }

    .account-name-cell > div {
        min-width: 0;
    }

    .account-name-cell strong {
        display: inline;
        font-size: 17px !important;
        font-weight: 500 !important;
        overflow-wrap: normal;
    }

    .account-name-cell small {
        display: block;
        margin-top: 3px;
        color: var(--mobile-muted);
        font-size: 13px;
    }

    .account-color {
        flex: 0 0 42px !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 13px !important;
    }

    .account-actions {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px !important;
    }

}