/* ============================================
   MOBILE RESPONSIVE - Telas Web em Celulares
   Objetivo: tornar telas web usaveis em mobile
   GARANTIA: 100% das regras dentro de @media
   Nenhum impacto em telas >= 769px
   ============================================ */

/* ========================================
   CLASSE UTILITARIA: Esconder colunas em mobile
   Uso: HeaderClass="mobile-hide" CellClass="mobile-hide"
   ======================================== */
@media (max-width: 768px) {
    th.mobile-hide,
    td.mobile-hide {
        display: none !important;
    }
}

/* ========================================
   GERAL: Ajustes globais para mobile
   ======================================== */
@media (max-width: 768px) {
    /* Containers com menos padding */
    .mud-container.pa-4 {
        padding: 8px !important;
    }

    /* DataGrid: font menor e padding compacto */
    .mud-table-cell {
        font-size: 12px !important;
        padding: 4px 4px 4px 6px !important;
    }

    /* Toolbar do DataGrid: permitir wrap */
    .mud-table-toolbar .mud-stack {
        flex-wrap: wrap !important;
    }

    /* Pager em mobile: centralizado */
    .mud-table-pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Titulos h6 menores */
    .mud-table-toolbar .mud-typography-h6 {
        font-size: 1rem !important;
    }
}

/* ========================================
   1. GESTAO ORCAMENTOS
   ======================================== */
@media (max-width: 768px) {
    /* KPI Cards: grid 2x2 */
    .indicadores-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    .indicador-item {
        max-width: none !important;
        min-width: unset !important;
        flex: unset !important;
    }

    /* Toolbar chips: scroll horizontal */
    .toolbar-actions {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    .toolbar-actions .mud-chip {
        flex-shrink: 0 !important;
        font-size: 0.65rem !important;
    }
}

/* ========================================
   3. DESEMPENHO PAGE
   ======================================== */
@media (max-width: 768px) {
    /* Botoes de metrica: scroll horizontal */
    .desempenho-metricas-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        max-width: 100%;
    }

    .metric-button {
        font-size: 11px !important;
        padding: 2px 6px !important;
        margin: 0 2px !important;
    }

    /* Esconder slider de variacao em mobile */
    .desempenho-variacao {
        display: none !important;
    }
}

/* ========================================
   5. USUARIO LIST PAGE
   ======================================== */
@media (max-width: 768px) {
    .usuario-actions-desktop {
        display: none !important;
    }
    .usuario-actions-mobile {
        display: flex !important;
    }
}

@media (min-width: 769px) {
    .usuario-actions-mobile {
        display: none !important;
    }
}

/* ========================================
   6. VENDEDOR LIST PAGE
   ======================================== */
@media (max-width: 768px) {
    .vendedor-actions-desktop {
        display: none !important;
    }
    .vendedor-actions-mobile {
        display: flex !important;
    }
}

@media (min-width: 769px) {
    .vendedor-actions-mobile {
        display: none !important;
    }
}