/* CSS Global para Layout 2x2 em Cards - Mobile First */

/* Aplicar layout 2x2 para todos os containers de cards de estatísticas em mobile */
@media (max-width: 768px) {
    /* Containers de estatísticas principais */
    .quick-stats,
    .stats-container,
    .stats-grid,
    .delivery-stats,
    .rupture-stats,
    .widgets-grid,
    .store-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    
    /* Ajustes específicos para diferentes tamanhos de tela */
    @media (max-width: 480px) {
        .quick-stats,
        .stats-container,
        .stats-grid,
        .delivery-stats,
        .rupture-stats,
        .widgets-grid,
        .store-stats-grid {
            gap: 12px !important;
        }
    }
    
    @media (max-width: 360px) {
        .quick-stats,
        .stats-container,
        .stats-grid,
        .delivery-stats,
        .rupture-stats,
        .widgets-grid,
        .store-stats-grid {
            gap: 10px !important;
        }
    }
}

/* Garantir que cards individuais tenham comportamento responsivo */
@media (max-width: 768px) {
    .stat-card,
    .rupture-stat-card,
    .store-stat-card,
    .widget {
        min-width: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Melhorar legibilidade dos textos em cards pequenos */
    .stat-card .stat-label,
    .rupture-stat-card .rupture-stat-label,
    .store-stat-card .store-stat-label {
        font-size: 12px !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Ajustar ícones para não interferir no texto */
    .stat-card .stat-icon,
    .rupture-stat-card .rupture-stat-icon,
    .store-stat-card .store-stat-icon {
        flex-shrink: 0 !important;
        margin-right: 8px !important;
    }
}

/* Orientação landscape em mobile - manter 2x2 */
@media (max-width: 768px) and (orientation: landscape) {
    .quick-stats,
    .stats-container,
    .stats-grid,
    .delivery-stats,
    .rupture-stats,
    .widgets-grid,
    .store-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}