/* Entrega independente do CSS global: neutraliza também o layout antigo em cache. */
@media (max-width: 760px) {
    body.layout-claro:is(.section-dashboard, .section-vendas) #app-page .main > .layout-filters:not(.hidden):not([hidden]) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        align-items: end;
    }

    body.layout-claro:is(.section-dashboard, .section-vendas) #app-page .layout-filters > .field {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    body.layout-claro:is(.section-dashboard, .section-vendas) #app-page .layout-filters > :is(#data-filter-field, #mes-vendas-field) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    body.layout-claro:is(.section-dashboard, .section-vendas) #app-page .layout-filters > #filtro-nivel-field {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    body.layout-claro:is(.section-dashboard, .section-vendas) #app-page .layout-filters :is(input, select) {
        display: block;
        box-sizing: border-box;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        font-size: 16px !important;
    }

    body.layout-claro:is(.section-dashboard, .section-vendas) #app-page .layout-filters input:is([type="date"], [type="month"]) {
        -webkit-appearance: none;
        appearance: none;
        padding: 0 8px !important;
        line-height: 42px !important;
        overflow: hidden;
    }

    body.layout-claro:is(.section-dashboard, .section-vendas) #app-page .layout-filters input:is([type="date"], [type="month"])::-webkit-date-and-time-value {
        width: 100%;
        min-width: 0;
        line-height: 42px;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.layout-claro:is(.section-dashboard, .section-vendas) #app-page .layout-filters > :is(button, .dashboard-sync-status) {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }
}

@media (max-width: 480px) {
    body.layout-claro:is(.section-dashboard, .section-vendas) #app-page .main > .layout-filters:not(.hidden):not([hidden]) {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) !important;
    }
}